Sass and Compass in Liferay Theme

---

Sass and Compass were introduced in Liferay Portal 6.1. This article explains the sass and compass in Liferay theme development. At the end of this article you will be able to understand the concept of sass and compass in Liferay. If we understand the basics of sass and compass then our theme development will be more interesting. 

What’s SASS?

Sass stands for Syntactically Awesome Style Sheets. Sass is a scripting language for writing CSS and it extends CSS3. Sass adds the following programming features into CSS

• Nesting
• Parent references
• Variables
• Operations and functions
• Interpolation
• Mixins
• Arguments

Sass has two syntax. One is Sassy CSS (SCSS) syntax which is mostly used. Any valid CSS3 stylesheet is a valid SCSS stylesheet as well. SCSS files use the .scss extension.

The second syntax is known as the indented syntax. Files in this syntax have the .sass extension in their file names. This syntax uses an indentation of lines instead of brackets and semicolons to specify blocks.

http://sass-lang.com/

Example:

What’s Compass?

Compass is an open source CSS authoring tool. We can install Compass on either a Linux machine or a Windows machine. After the installation, we can start a CSS project in both the command-line mode and user interface mode.Compass uses Sass. Compass needs .scss file as an input.

http://compass-style.org/

[richfocus title=’In Liferay Theme’]

While developing Liferay theme we are not required to install compass separately. Everything is available under the hood. We just need to concentrate how to use sass and compass. During theme development we can write styles either in CSS or SCSS syntax.

[/richfocus]

Liferay Theme Compilation:

Are you confused by the term theme compilation? Don’t be confused. Probably you used ant deploy many times for theme deployment. When a theme is deployed its actually compiled first. That means the css are validated by compass. Compass will compile all the .scss and .css file. After compilation, style in SCSS syntax will be converted to CSS syntax. Compass will not only validate SCSS code but also normal CSS styles. Any syntax error will be caught in this phase. After proper compilation all the compiled css files will be put under /docroot/css/.sass-cache folder of the theme. sass-cache will contain pure css styles and in run time Liferay will pick css styles only from this folder.  

[richfocus  title=’Sass to CSS Builder’]

com.liferay.portal.tools.SassToCssBuilder is the java file which will do all the compilation works. For only css compilation but not deployment of theme we can use ant target  build-css.

[/richfocus]

Some SASS Examples

1. Variables in Sass

In plain css styling we don’t have any concept of variables. But in Sass we can create variables and reuse that variables whenever its required. A variable in Sass starts with $.

[richfocus  title=’Variables in Sass’  purpose=’code’]

$test-color: #FF0000;

.test{
	color:$test-color;
}

.sample{
	font-style: italic;
	color: $test-color;
}

[/richfocus]

As shown in the above code test-color is variable and its used in 2 places. Thus we are reusing css styles. Is not it cool?

2. Mixins in Sass

Mixins are like  functions and reuse the functions whenever necessary. We can even pass values to a mixin. A mixin starts with @mixin. For example 

[richfocus  title=’Mixin in Sass’  purpose=’code’]

@mixin border-radius($radius) {
    border-radius: $radius;
}

.box {
	@include border-radius(10px);
}

[/richfocus]

In the above code we are creating a mixin with name border-radius which has $radius as an argument. That means we can call this mixin by passing some value. A mixin is called by @include. 

3. Extend/Inheritance in Sass

We can inherit all the css properties from one class to another class using @extend. For example 

[richfocus  title=’Inheritance in Sass’  purpose=’code’]

.test-class {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.another-class {
  @extend .test-class;
  border-color: gray;
}

[/richfocus]

In the above code the .another-class will inherit all the css properties from .test-class.

Note: The above examples are the only basics of sass. Visit http://sass-lang.com/guide for more. For testing sass syntax we can use sassy syntax in custom.css file of a given theme.