Liferay 6.1 and SASS

Company Blogs 2012年1月16日 按 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( 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( 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.


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 */ 



Liferay6.1                                                                          Liferay 6.0.x



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. 


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



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.


Liferay Gadget for Windows 7

Company Blogs 2010年11月25日 按 Bavithra Rajendran Staff

Desktop Gadgets are very popular and I wanted to write a simple Liferay gadget for windows 7 and at last came up with a desktop gadget that has frequently used links of Liferay.  I call this as Liferay Quick Launch.


You can download the Liferay Quick Launch from this link .

Hope you all find this useful

Liferay Wallpapers

Company Blogs 2010年2月15日 按 Bavithra Rajendran Staff

This is my first blog and I am extremely happy that I created Liferay wallpapers and posting as my first blog. I took lot of patience in completing this and as a result I guess it came good . I am calling this as Ray of Life and Liferay Blossom ( people do excuse me for the lack of better names). These pictures includes a wide range of resolutions for different ratios.

Ray of Life


Liferay Blossom


I am very much delighted for these Liferay Desktop Backgrounds.
I hope you all enjoy it :)

显示 3 结果。