Blogs

Fast development using Compass/Sass and Liferay Portal

Marcus Hjortzén

January 20, 2014

A Minute Read

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.

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!

6 Comments

Please sign in to comment.

Wow, this is really handy, Marcus! Thanks for the post.

Please sign in to reply.

Can you clarify why you would need this for 6.1 give the SASS compiler is built in?

Please sign in to reply.

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

Please sign in to reply.

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

Please sign in to reply.

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

Please sign in to reply.