We are always looking for ways how
Vaadin framework and
GWT can benefit from each other even more. I believe this has a lot of potential. Being able to freely mix and match server and client side implementations in one application to provide the best user experience is what I am trying to accomplish.
As the holiday season is so close now, I am very happy to introduce to you a little present that makes it possible to use the
SASS compiler from
Vaadin framework with
Vaadin client side and standalone
GWT applications. It is meant as a little thank you from
Vaadin to the
GWT community. There is more to come in the future.
A good start with CssResource
GWT provides the possibility to use variables, conditionals and many more features on top of a regular
CSS file, which the compiler burns down to standard
CSS. Unfortunately Google did not extend it much since it was introduced. Today, other tools are available that offer many more features to manage the growing stylesheets for the web applications we develop today.
SASS (Syntactically Awesome Stylesheets) was chosen as the default for its theming support, specifically the
SCSS (Sassy CSS) format. These are the features taken from its home page http://sass-lang.com/
- Fully CSS3-compatible
- Language extensions such as variables, nesting, and mixins
- Many useful functions for manipulating colors and other values
- Advanced features like control directives for libraries
- Well-formatted, customizable output
- Firebug integration
As with the
SASS file needs to be processed before it can be used in your application. As the
SASS compiler is originally written in
Vaadin dev team started to develop a
Java implementation, which lives in the internals of the
vaadin-server.jar. You can learn more about it in the dev wiki
Linker for the client side
To make this compiler available for the client side, I wrote a
GWT linker, that searches for
SCSS files in the compilation artifacts, compiles them to
CSS and provides them back to the linking process, which copies them to the web content folder. This linker is now available as part of
Vaadin 7 beta 11. The easiest way to try it out is to create a
- Open an existing project or create one as described in the Book of Vaadin
- Getting started with the Eclipse plugin
- Create a Vaadin project
- Add a client side widget to the project, as described in the Book
- Create a Widget
This creates a widgetset file, usually named
<your_project_name>Widgetset.gwt.xml. It can be used to configure your client side in a lot of ways. For the linker to work, it needs to be defined here, together with the stylesheets.
- Open this file and add the elements below to the root element of the module file
<define-linker name="scssintegration" class="com.vaadin.sass.linker.SassLinker" /> <add-linker name="scssintegration" />
Add the stylessheet(s) you want to link to from the
HTMLfile your application lives in
- These are the files that are created by the linker, so they do not need to exist in your project
<stylesheet src="main.css"/> <stylesheet src="specials/landing.css"/>
Final step, create a folder with the name
publicnext to the client package that was created during the
Vaadin Widgetcreation, and copy your
SCSSfiles you want the linker to compile into this folder
- Mixins are possible. In principle folder hierarchies are supported, but a small faux pas made it through the review (Ticket 10593)
During compile, or
GWT dev mode reload, the linker detects the
SCSS files in public folders, compiles them to
CSS and provides them back to the linker process that places them into the webcontent folder. The base path is
That’s it. This is the first step for providing
SASS support to the client side. Specifically to get feedback if there is any interest in it, and if this is a good way to provide this functionality. The next step is to also allow it inside
CssResource files. As this depends on changes in
GWT itself, this might take a while, but I will definitely start working on it in January
As mentioned above, this of course also works for
GWT outside the Vaadin environment, and the steps above to use the linker are are exactly the same. Just replace the word
module. But for now, the easiest way is to add Vaadin to your GWT project, as described in the Vaadin dev wiki.
For more info about linkers, this video from Google I/O 2010 explains how they work and presents more ideas how they can be used.
Unfortunately, todays post turned out to be more like a link list, or a holiday reading list, than an actual technical post as it was planned. When there is interest, I am more than happy to write more specifically how linkers in general and specifically the SassLinker works.
Please be aware that the SASS compiler is still under development, so not all SASS features are supported yet.
I would be happy when you see any value in being able to use SASS for your Vaadin client side or GWT applications. Any constructive feedback about it is highly welcome.
With this, I wish you happy holidays and a good start in a successful year 2013.