Vaadin 7 beta1 - Themes and sass

Vaadin 7 beta1 contains support for writing themes in sass.

Sass makes it easier for you

Sass(scss) is an extension of CSS, allowing you to use variables, selector nesting, mixins, inheritance, functions and more. Sass generally makes your life easier because you can more easily structure your CSS and reuse parts of it. Using variables you can define your background color, your font or basically anything you can think of and use it throughout your theme. Using the built-in functions you can achieve things like “10% darker color” really easily.

Automated compiling of sass to css

Sass is an extension to css and browsers do not understand sass. Therefore the sass you write must be compiled into css before being presented to the browser. VaadinServlet offers you the option of automated compilation on the fly - add your styles.scss file where you would add styles.css and you are done. For build scripts and similar there is the SassCompiler class. Please do note that the automated compilation in the servlet is only intended for development mode and will in fact be disabled once you enable production mode.

Still some work to do

While the sass support is there in beta1, it is not 100% finished. We have some bugs to work out and there are some advanced features that are still missing from the compiler. We are also still considering ways of making it easier to theme individual components from scratch (i.e. less overriding with more specific selectors). The basic stuff is there and works well though - we do our own themes using sass nowadays. I still hope we will see a significant improvement to this once we get to beta2.

For short examples on how to use the new features, check out the Vaadin 7 mini tutorials:

For information on how to migrate from Vaadin 6 to Vaadin 7, see

This is an beta release so we expect there to be bugs. We will no longer be making large new features but finalization of the current features might still affect API in some places. All your comments on the new features are welcome. Please post all Vaadin 7 related comments in the Vaadin 7 category.