Recent Bloggers

Olaf Kock

Staff
78 Publications
26 août 2014

Matti Tahvonen

3 Publications
26 août 2014

Ronald Sarayudej

Staff
151 Publications
25 août 2014

James Falkner

Staff
95 Publications
25 août 2014

Paulo Fernandes

Staff
15 Publications
22 août 2014

Scott Lee

Staff
3 Publications
21 août 2014

Martin Yan

Staff
5 Publications
20 août 2014

Miguel Ángel Pastor Olivar

Staff
15 Publications
19 août 2014

Josiah "Duke" Harrist

Staff
1 Publications
13 août 2014

James Min

Staff
30 Publications
12 août 2014

Fast development using Compass/Sass and Liferay Portal

General Blogs 20 janvier 2014 Par 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!
 
Affichage de 1 résultat(s).