Less: A look into the CSS Preprocessor

Feb 25, 2013
Santiago Valle

What is LESS?

LESS is a dynamic style sheet language that allows developers to reuse CSS elements and write LESS code with the same semantics. It has a similar concept as its predecessor SASS, but I think is much simpler.

Compilation

You can do it in two different ways:

1)    Precompiling a .less file with a free tool

You will need a compiler to transform your .less file into a .css file.

The .less file contains the LESS code which is what you will be writing, after compiling you will have a standard CSS that a web browser can read and process.

There are a lot of third party compilers available to complete this process. As a Windows user, I recommend WINLESS; however, if you are a MAC user, you will have to consider another option.

2)    Using the JavaScript version (less.js)

This process is also extremely simple. You just have to download the library from http://lesscss.org to include the script in your markup HTML. The browser will process it as the page loads.

Include the following in the <head> of your markup:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="less.js" type="text/javascript"></script>

NOTE: Make sure you include your style sheets before the script.

LESS Examples

Nesting:

Satandard CSS
#footer {}
#footer #nav {}
#footer #nav ul {}
#footer #nav ul li {}
#footer #nav ul li a {}
LESS Code:
#footer{
#nav {
   ul{
  li {
       a{}
    }
     }
      }
}

Variables:

Standard CSS:
.title, #left_rail, #header, #footer, p, h1{
Color:red;
}
LESS Code:
@default-color: #4455EE;
#header{background-color:@default-color;}
#footer{color: @default-color;}
h1{color: @default-color;}

Reuse of Classes:

Standard CSS:
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
   border-radius: 10px;
LESS Code:
    .rounded-corners {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }
    #left_rail {
      .rounded-corners;
    }    
    

Parametric Mix-ins:

Standard CSS:
  .rounded_corners (@radius: 5px) {
    border-radius: @radius;
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
}

LESS Code:
#header {
   .rounded_corners;
  #footer {
    .rounded_corners(10px);
  }

Functions and Operations:

Standard CSS:
#header {
   color: #333;
   border-left: 1px;
   border-right: 2px;
}
#footer { 
   color: #114411;
   border-color: #7d2717;
 }
LESS Code:
@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer { 
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

LESS will change the way you write CSS.  It saves time and unnecessary work. You can use LESS to create variables, perform operations on variables, nest rules, and build complicated mix-ins to simplify your stylesheets.