Syntactically Awesome Stylesheets (Sass)

    Sass can be used in two basic ways in Vaadin applications, either by compiling SCSS files to CSS or by doing the compilation on the fly. The latter way is possible if the development mode is enabled for the Vaadin servlet, as described in “Other Servlet Configuration Parameters”.

    Sass allows defining variables that can be used in the rules.

    CSS

    The above rule would be compiled to CSS as:

    CSS

    2.   color: blue;

    Sass supports nested rules, which are compiled into inside-selectors. For example:

    CSS

    is compiled as:

    CSS

    1. .v-app {
    2.   background: yellow;
    3. }
    5. .v-app .mybutton {
    6.     font-style: italic;
    7. }
    8. .v-app .mybutton .v-button-caption {
    10. }

    Mixins are rules that can be included in other rules. You define a mixin rule by prefixing it with the @mixin keyword and the name of the mixin. You can then use @include to apply it to another rule. You can also pass parameters to it, which are handled as local variables in the mixin.

    CSS

    The above SCSS would translated to the following CSS:

    CSS

    1. .v-button-caption {
    2.   background: yellow;
    3.   margin: 10px;
    4. }

    You can also have nested rules in a mixin, which makes them especially powerful. Mixing in rules is used when extending Vaadin themes, as described in .

    Vaadin themes are defined as mixins to allow for certain uses, such as different themes for different portlets in a portal.

    Sass Basics with Vaadin

    You can create a new Sass-based theme with the Eclipse plugin, as described in .