Hi everybody,
I’m new to Vaadin and I have to say that you are doing a great job.
At work we are using Vaadin 7.3.0 with Valo theme, we made three themes and all of them shared styles from a “common-styles” directory where we put all shared styles (font sizing, application layout etc.). Now I have assigned a task to allow the user to change the font size in real time, the problem is that the changes should not be only the font size, that’s the reason because setting font-size to .v-app in javascript is not enough, at the end we need the same behaviour as if we were changing the $v-font-size valo variable (because there a lot of components that depends on that value). So ¿how could we change a sass variable value from Java?.
I tried something like this at _variables.sccs file:
$v-font-size:16px;
.lower-font-size
{
$v-font-size: 10px;
}
.medium-font-size
{
$v-font-size: 14px;
}
but obviously sass is usign the last value assigned.
The only way to do that is versioning the themes like for example:
facebok-theme (default font size)
facebook-theme-lower (lower font size)
facebook-theme-medium (medium font size)
And change the variable value as needed, but I think that’s not the best and unique solution.
An old thread, but I’ll try to explain the problem with changing variable values from Java. Maybe this helps someone else later if not Ardiel now.
The whole theme is compiled from SCSS to CSS, and variables are expanded and used in calculations etc. at that time. The browser never sees those variables, only the computed values. Therefore, setting a new value for the variable from Java would require recompiling the whole theme.
The usual approach to handle such situations with Sass is to compile all the variants into the final CSS file, giving the changing values as a parameter to a mix-in that is included in each of the blocks for which a different value is desired.
Another option would be to hook into the on-the-fly theme compilation, dynamically generating the theme in when the font size is changed in Java. You’d effectively need to replicate VaadinServlet.serveOnTheFlyCompiledScss(), and some of the methods it calls and methods calling it as they are currently private in VaadinServlet. You could perhaps even have a separate servlet handling /VAADIN/themes that e.g. takes the size as a URL parameter or part of the theme name, validates that it is an integer (to prevent an attacker from injecting something into the theme), checks its cache for already compiled themes for that size and dynamically generating and compiling the theme file if there isn’t one. You could probably borrow most of the new caching logic from the latest master/7.4 branches of Vaadin.