A SCSS module is provided for magnolia 5 as a community project on magnolia forge.
Since the Vaadin UI framework used by magnolia leverages SCSS and comes with a SCSS compiler, a simple module can expose this functionality for use by your themes.
SCSS, also known as SASS, is an extension to CSS. In a nutshell, SCSS extends CSS with many useful concepts such as nested rules or mixins and also lets you define variables and use simple programming constructs (like for loops) in your CSS stylesheets. A SCSS compiler turns your SCSS files into plain old CSS for shipping to the browser.
If you have large or complicated CSS files, or if it has ever bothered you that you have to define the same color values or font-families over and over again in the same CSS file, then SCSS might be for you.
More information on SCSS can be found at: http://sass-lang.com
Getting the module
Download JAR: from nexus.
Getting the source:
Using SCSS in magnolia
After installing the SCSS module you will be able to create two new kinds of resources in the resources workspace:
- SCSS - for plain SCSS stylesheets.
- Processed SCSS - for SCSS stylesheets which additionally contain freemarker code.
Create resources of the appropriate type and fill them with your SCSS code.
When you request an SCSS resource, the SCSS compiler compiles your SCSS into CSS on the fly. It will process any imports, resolving them against magnolia's resources workspace. Errors will be reported to magnolia's log files on author and public instances and additionally as a comment in the CSS output on author instances.
When using "Processed SCSS" stylesheets, the freemarker processing happens before the SCSS processing.
Be aware that the SCSS resources are subject to the same caching (magnolia's cache, resources "far future" caching and browser cache) as other resources in magnolia, so make sure your caches are flushed if things aren't changing after you modify the resources.
The SCSS module does not include an SCSS compiler. Instead, it uses the SCSS compiler provided by the Vaadin UI framework included with magnolia. Therefore the SCSS module is limited to supporting those aspects of SCSS supported by Vaadin's compiler. At the moment the support is rather poor - many things are not implemented. However, the most important and commonly used features of SCSS are working (mixins, nested rules, variables), so you can already benefit a lot from the current level of functionality. Also, the compiler may improve in the future, in which case magnolia's support for SCSS will improve with it.
Use at your own risk, your milage may vary.
Provided under a BSD License, with the express invitation to use, fork or otherwise change for your own purposes. Please consider contributing in the form of code, documentation, bug reports or feedback.