Liferay 6.1 and SASS

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.

 

博客
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?
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".
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
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
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 ?
Can you provide me the info on which version of scss liferay 6.1 is using?
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?
"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.
The examples show SCSS; will it also support .sass? I assume yes, but I want to make sure.
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 ?
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".
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.
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 ?
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.