« Back

Liferay 6.1 and SASS

Company Blogs January 16, 2012 By Bavithra Rajendran Staff

Lieray 6.1 CE is released and many of you have started using it. There are lots of features in Liferay 6.1 and one among them is the facility to use SASS in Liferay.

SASS:

SASS(http://sass-lang.com) stands for Syntactically Awesome StyleSheets. It is a tool that allows you to write CSS more easilyIt is an extension of CSS3 which means whatever CSS file is a valid SassyCSS (SCSS). It allows you to use variables, nested rules, mixins, inline imports, interpolation, arguments, manipulating colors and more with a fully CSS-compatible syntax. Sass generates well formatted CSS and it is much easier to organize and maintain your stylesheets.

Compass :

Compass(http://compass-style.org) is an open-source CSS authoring framework which makes easier to build and maintain your markup and stylesheets. By using compass, you can write your own stylesheet in Sass instead of CSS.

How does Compass Work?

It can be imported using @import "compass" in CSS. SCSS is built based on the CSS3 specification which means that it is highly compatible with CSS3. SCSS also has all the power of Sass.

We’ll see here as how to use the variables, nested rules, mixins, inline imports, interpolation and arguments through CSS files.

Variables:

We’ll see how to use variables and a custom mixin to show how Compass makes it easy to reuse colors, sizes, and other values without repeating.

/* Variable Declaration */

/*These variables can be used globally throughout your stylesheets */ 

 

Example:

Liferay6.1                                                                          Liferay 6.0.x

    

Mixins:

By using the mixin, you can re-use the styles, properties & selectors without copying to other selectors. To achieve this , you need to package the properties with @mixin and to include it in other element with @include. 

Example:

Liferay 6.1                                                                        Liferay 6.0.x

          

      

Nested Rules:

Nesting avoids repeating CSS selectors and also keeps the style compact for a certain area of the User Interface. 

Let us have a look at an example of custom.css code for navigation part in themes. After using the nesting rule, the code should look like this :

Liferay 6.1                                                                              Liferay 6.0.x

            

Parent Reference:

Parent reference allows you to reference a parent selector  in the case of pseudo-classes like :hover, :link, :visited and :active states.

Liferay 6.1                                                                                       Liferay 6.0.x

             

Interpolation:

We can also use SassScript variables in selectors and property names using #{} interpolation. Here’s the example:

Liferay 6.1                                                                                       Liferay 6.0.x

              

Liferay6.1 allows you to use Sass which helps the code be simpler for mobile site design. (Thanks to BradleyWood’s solution in this forum post). 

As said in Sass , it makes CSS fun again and with Liferay 6.1, you can easily create manageable style sheets and start updating to Liferay 6.1 and use Sass to manage your style sheets smiley.

 

Threaded Replies Author Date
Very good article , thanks a lot. Wasim Shaikh January 16, 2012 10:51 PM
Nice post! Thanks. Jonas Yuan January 18, 2012 1:42 PM
Hi Bawithra, I am interested in the way... Jordi Buendia January 30, 2012 3:52 AM
Great Post vasv kumar February 13, 2012 11:31 PM
Hi Jordi, in Liferay 6.1, your CSS can use SASS... Julio Camarero March 5, 2012 3:50 AM
Something seems to be weird with the... hannes schluchtmann May 4, 2012 12:43 AM
Bavithra, I am new to Sass, so this is a great... Ben Carson August 16, 2012 2:37 PM
Hi Bavithra, Can you throw some light on the... Muhammed Shakir August 25, 2012 2:36 AM
this is a terrible idea. inline styles are bad.... michael delahousaye September 9, 2013 5:44 PM
Can you provide me the info on which version of... Prasanna Raj October 10, 2012 12:46 PM
It is 3.1.7 Bavithra Rajendran October 10, 2012 10:15 PM
I am planning to use Apache for serving CSS... Advait Trivedi December 27, 2012 9:36 PM
"I am planning to use Apache for serving CSS... Narsingh Pal July 28, 2015 9:31 PM
The examples show SCSS; will it also support... John Nguyen June 12, 2013 7:28 AM
Can I use SaaS in my plugin portlet ? If yes,... Tejas Kanani July 18, 2013 7:25 AM
SaaS and Sass are completely different here.... John Nguyen July 18, 2013 7:33 AM
Sorry John !! It's a typo. I am also referring... Tejas Kanani July 19, 2013 12:14 AM
Looks like it's working with Ant only. As when... Tejas Kanani July 19, 2013 12:51 AM
Is there a way to enable the debug_info mode... Thomas Kellerer November 19, 2013 12:19 AM

Very good article , thanks a lot.
Posted on 1/16/12 10:51 PM.
Nice post! Thanks.
Posted on 1/18/12 1:42 PM.
Hi Bawithra,

I am interested in the way Liferay 6.1 implements SASS, but I don't understand what is exactly the new feature 6.1 version is providing in the use of SASS. I guess in 6.0 version someone using SASS should compile himself his SASS code in order to get a CSS output: is the Liferay 6.1 improvement consisting in a native compiler of the SASS code? Can you write a 6.1 theme in SASS and then delegate to Liferay's core to generate the CSS?
Posted on 1/30/12 3:52 AM.
Posted on 2/13/12 11:31 PM.
Hi Jordi, in Liferay 6.1, your CSS can use SASS without doing anything special. Any CSS file in your portlet or theme is compiled for you when you execute "ant deploy".
Posted on 3/5/12 3:50 AM in reply to vasv kumar.
Something seems to be weird with the sass-variables handling when separating the css into several files:
http://www.liferay.com/community/forums/-/message_boards/category/239390
Posted on 5/4/12 12:43 AM.
Bavithra,
I am new to Sass, so this is a great primer for using it in Liferay 6.1. Thank you for taking the time to write this very useful post!

Ben
Posted on 8/16/12 2:37 PM.
Hi Bavithra,
Can you throw some light on the significance of Dynamic CSS Filter - JSP in web.xml file ? I want to be able to use Compass in my jsps inline style. Hope this is possible ?
Posted on 8/25/12 2:36 AM in reply to Ben Carson.
Can you provide me the info on which version of scss liferay 6.1 is using?
Posted on 10/10/12 12:46 PM.
Posted on 10/10/12 10:15 PM in reply to Prasanna Raj.
I am planning to use Apache for serving CSS file in my deployment. What should be my strategy to handle sass based css files? Should I just exclude those files which is having @import "compass" declaration from Apache and let my app server serve them?
Posted on 12/27/12 9:36 PM in reply to Bavithra Rajendran.
The examples show SCSS; will it also support .sass? I assume yes, but I want to make sure.
Posted on 6/12/13 7:28 AM.
Can I use SaaS in my plugin portlet ? If yes, is the same steps mentioned in blog I'll have to follow ? I mean adding @import "compass" in my css.

Any idea ?
Posted on 7/18/13 7:25 AM.
SaaS and Sass are completely different here. SaaS means "Software as a service" while Sass means "Syntactically Awesome Stylesheets" which is another way of writing CSS, its a preprocessing language for CSS.

If you are referring to the latter, you cannot do @import "compass", you will need a semi-colon at the end. From my experience, Liferay does not support the .sass syntax, a cleaner syntax without semi-colons and brackets, "indentation style".
Posted on 7/18/13 7:33 AM in reply to Tejas Kanani.
Sorry John !! It's a typo.
I am also referring to Sass here.
Well I've tried by adding @import "compass"; (with semi-colon) in my custom css. But it look like it's still not working in my portlet.
And just to add one more thing, I am using maven to build my portlet.
Does it create any issue ? Also does it have any other known limitations ?
Thanks for any suggestion/help over here.
Posted on 7/19/13 12:14 AM in reply to John Nguyen.
Looks like it's working with Ant only. As when I've created new portlet and tried to deploy it with Ant including my css with compass imported. It has created .sass-cache folder including the compiled css in it.

Can't we use it with maven ?
Posted on 7/19/13 12:51 AM in reply to Tejas Kanani.
this is a terrible idea. inline styles are bad. you want semantic, modular code, not spaghetti code.
Posted on 9/9/13 5:44 PM in reply to Muhammed Shakir AK Misarwala.
Is there a way to enable the debug_info mode for SASS when building a theme using the SDK? I would like to use FireSass in order to debug my (6.2) theme.
Posted on 11/19/13 12:19 AM.
"I am planning to use Apache for serving CSS file in my deployment. What should be my strategy to handle sass based css files? Should I just exclude those files which is having @import "compass" declaration from Apache and let my app server serve them?"

Hi Advit,

Did you got any solution for this.
Posted on 7/28/15 9:31 PM in reply to Advait Trivedi.