« Back

Fast development using Compass/Sass and Liferay Portal

General Blogs January 20, 2014 By Marcus Hjortzén

We're moving towards writing all our styles using Sass. Since we have a lot of styles already in place in different themes and plugins this means a lot of copy-rewrite-test. Compiling and deploying a theme each time you write a new rule to test it is taking a lot of time which was why we tried to get a quicker roundtrip.

This is a write-up of how we got Liferay Portal to work with an external Sass/Compass compiler, giving us auto deployment of a Theme. Our enviroment is OSX but any *NIX should work. Windows is largely dependent on a proper shell.
 

First out: Liferay/portal-developer.properties

To bypass caching, thus enabling reloads from disk, we have to include the properties listed in the portal-developer.properties. Either by including this file or by copying some (or all) of the properties into your properties-ext.properties.
 

Second: Install a Sass/Compass compiler

Install a compiler that automatically compiles your Sass/Compass code whenever a change occurs.gem install compass

Third: Configure Compass and tell it to watch the theme directory

Compass watches a directory for changes and automatically compiles the .scss files. The output directory should be your plugin installation directory. That is, /liferay-portal-6.1.30-ee-ga3/tomcat-7.0.40/webapps/my-theme/css
Generate a configuration file in your plugin root:

http_path = "/"
css_path = "/.../liferay-portal-6.1.30-ee-ga3/tomcat-7.0.40/webapps/UU-universal-theme/css"
sass_dir = "src/main/webapp/css"
Run compass and tell it to watch this directory. 
compass watch
NOTE! The Compass compiler only reacts to files named .scss or .sass!
Liferay on the other hand only compiles files that end with .css! This is a big issue for developers without a proper shell. In my case I created a link with the ln command. I would really like to see a way for Liferay to process the .scss files in the compile stage in a future release and not just .css.
 
Done!
 
In my case, whenever a change is detected in the sass_common.scss-file (or any file it imports) a compiled version will be installed in my tomcat/webapps/plugin/css directory. Since Liferay is running with developer settings this change will be loaded at the next browser reload.
 
With this setup we're able to quickly add new rules from an old theme, rewrite them into Sass-style and easily verify that they are correct. It doesn't sound like much but this literally saves us hours per week!
 
Threaded Replies Author Date
Wow, this is really handy, Marcus! Thanks for... James Falkner January 22, 2014 11:39 AM
Can you clarify why you would need this for 6.1... Richard Lee April 7, 2014 11:07 PM
Richart Lee, SASS is built-in to Liferay,... Fuad Efendi December 22, 2014 4:12 PM
Hi Fuad, agree the built-in SASS in Liferay SDK... Richard Lee January 4, 2015 4:41 PM
It is really important to have a fast... Alberto de Francisco Martín August 3, 2015 3:30 AM
Hi Marcus Yes. Your development way can save... Pradeep Jain June 20, 2016 2:56 AM

Wow, this is really handy, Marcus! Thanks for the post.
Posted on 1/22/14 11:39 AM.
Can you clarify why you would need this for 6.1 give the SASS compiler is built in?
Posted on 4/7/14 11:07 PM.
Richart Lee, SASS is built-in to Liferay, correct. However, it is not almost-real-time CSS updates: you need to rebuild whole theme and deploy it to Liferay, then wait until Liferay's SASS recompiles it (hopefully without compilation errors).

Marcus suggests better development environment setup...
Posted on 12/22/14 4:12 PM.
Hi Fuad,
agree the built-in SASS in Liferay SDK has many short comings like no real time updates (and version in LR 6.1 is a little buggy) this workflow will just mean a bit more due diligence for the dev's i.e. making sure they're running the same version of Compass/Sass and are not using the @import "compass" within themes
Posted on 1/4/15 4:41 PM in reply to Fuad Efendi.
It is really important to have a fast development environment.
I am using no caching server configuration (typical portal.developer options) and configure "Codekit" for OSX systems or "Koala" for windows systems.

The difference between wait times (compilation times) is important.
Regards
Posted on 8/3/15 3:30 AM.
Hi Marcus

Yes. Your development way can save our hours in a week.
Marcus, how we can manage Liferay to process '.scss' file?
Posted on 6/20/16 2:56 AM.