SCSS ToolSet


we are looking forward to build our own theme using SCSS. So I would like to ask you which tools / best practices you are using to build SCSS themes.

For example: If you analyse the style using FireBug, the reference of the CSS is pointet to the style.css file, which is not really existing.

It would be great if you could share your experience.

For syntax coloring in Eclipse you can make this hack:

To take pattern of best practices you can look into Dashboard demo:

thanks for the tipps, but I’m interessted in the way of working and the tools you are using.

How do you re-compile your code on the fly? Which tool do you use to analyse the output and trace back to the SCSS files?

Sass is quite new and the tool support for it (in general, not just Vaadin) is much more limited than that for plain CSS, which is used everywhere. This is the same problem that e.g. new programming languages face - the language is often much more powerful (like Scala vs. Java), but proper tooling support lags years behind and will usually be much more limited even then due to the smaller number of active user years for the language etc.

I very much doubt you would find any nice tools e.g. to trace generated CSS back to SCSS files. That is the price you pay for the additional features SCSS brings. Structuring your SCSS well often helps a lot, though.

As for recompiling SCSS to CSS on the fly, the Vaadin servlet does it automatically when not in production mode. Just create a styles.scss instead of styles.css, then trying to load styles.css automatically compiles it. This is a full recompile, though.

thanks for the answer Henri.

The re-compile is exactly my issue at the moment. Changes done in any scss file are not compiled on the fly.

We use the following in web.xml

Vaadin production mode

Removing the browser cache does not work, only restarting the webapp is working.

Maybe I missed some information, but I’m sure the reload worked some weeks ago, when I used Beta11.

please ignore the last post. I’ve found the issue. From my tests I run jetty:run-exploded.
Running the app only with jetty:run does works as expected.