Themes

}

}

is compiled as:

.v-app {

background: yellow;

}

.v-app .mybutton { font-style: italic;

}

.v-app .mybutton .v-button-caption { color: blue;

}

Mixins

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.

For example:

@mixin mymixin { background: yellow;

}

@mixin othermixin($param) { margin: $param;

}

.v-button-caption { @include mymixin;

@include othermixin(10px);

}

The above SCSS would translated to the following CSS:

.v-button-caption { background: yellow; margin: 10px;

}

You can also have nested rules in a mixin, which makes them especially powerful.

Vaadin themes are defined as mixins to allow use of multiple themes.

8.3.2. Sass Basics with Vaadin

We are not going to give in-depth documentation of Sass and refer you to its excellent documentation at http://sass-lang.com/. In the following, we give just basic introduction to using it with Vaadin.

You can create a new Sass-based theme with the Eclipse plugin, as described in Section 8.5, “Creating a Theme in Eclipse”.

Sass Basics with Vaadin

231