Link to the Client Side from SASS

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.

For Vaadin 7, 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 CssResource, a SASS file needs to be processed before it can be used in your application. As the SASS compiler is originally written in Ruby, 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 Vaadin project.

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 HTML file 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 public next to the client package that was created during the Vaadin Widget creation, and copy your SCSS files 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 <WebContent>/VAADIN/widgetsets/

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

Standalone GWT

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 widgetset with 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.