• Sass and Compass in Liferay Theme

    Posted on April 1, 2015 by Hamidul Islam in Liferay.

    sass-and-compass


    aim

    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 SheetsSass 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.

    sass-2-syntax

    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:

    sass-and-sassy-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/

    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.

    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.  

    liferay-theme-compilation

    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.

    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 $.

    Variables in Sass

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

    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 @mixinFor example 

    Mixin in Sass

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

    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 

    Inheritance in Sass

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

    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. 

One Response so far.

  1. Alberto says:

    Thanks for the post Hamidul.
    I found this page trying to understand the process of compilation sass with maven.
    Any advice?
    Thanks a lot

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you human? * Time limit is exhausted. Please reload CAPTCHA.

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close