CSS has a very powerful syntax but can easily become very verbose when working on non-trivial projects. In recent years the need to solve this problem has brought to life the concept of the CSS preprocessors such as SASS/SCSS and LESS.js. The former is written for the Ruby programming language whilst LESS is compiled using JavaScript.

A preprocessor allows additional leverage over CSS by providing additional syntax that delivers the following advantages:

  • Nested syntax

  • Ability to define variables

  • Ability to define mixins

  • Mathematical functions

  • Operational functions (such as “lighten” and “darken”)

  • Joining of multiple files

SCSS and LESS have very similar syntaxes, with SASS being a slight variant on SCSS. The similarities between them allows a developer to switch seamlessly if need be. In the following demonstration I will focus on the LESS syntax but all of the concepts can be transferred to the Ruby world.

Nesting

The nested syntax allows a cleaner method of targeting DOM elements. It prevents the need to rewrite selectors multiple times, additionally reducing the time it takes to make changes to stylesheets.

body {
  .header {
    h1 {
      font-size: 28px;
    }

h2 {
 font-size: 21px;
}

} }

This snippet of LESS above will translate into the following valid CSS when compiled:

body .header h1 {
  font-size: 28px;
} 
body .header h2 {
  font-size: 21px;
}

Obviously now when the class name of “header” needs to change to “masthead”, it only has to be updated in one location rather than searching over the stylesheet for all occurrences.

Additionally, the nested syntax can handle chained selectors. Adding the ampersand character (&) joins the next statement to it’s parent.

body {
  .header {
    h1 {
      font-size: 28px;

  &:hover {
    color: #123456;
  }
}

} }

Will translate to:
body .header h1 {
  font-size: 28px;
} 
body .header h1:hover {
  color: #123456;
}

 

Variables

Variables allow storing of any value and can later be reused. Similar to nesting, this allows the developer to specify certain values in one location and if they need changed, must only be updated once.
@col-red: #f00;
@col-blue: #00f;
@font-family: Arial, sans-serif;
@font-s: 12px;
@font-m: 14px;
@font-l: 16px;

h1 { color: @col-blue; // color: #0000ff; font: @font-l @font-family; // font: 16px Arial, sans-serif; }

 

Math Functions

Preprocessing allows the use of math functions to perform calculations. This becomes very useful when combined with variables.

@base-size: 10px;

.small { font-size: @base-size; } .medium { font-size: @base-size * 1.2; } .large { @large: @base-size * 1.5; font-size: @large; line-height: @_large + 4; }

Compiles to the following CSS:

.small {
  font-size: 10px;
}
.medium {
  font-size: 12px;
}
.large {
  font-size: 15px;
  line-height: 19px;
}
Here you see that simply changing the base-size variable’s value will change the font styles across the whole site instantly.


Operational Functions

In addition to the use of mathematics, we also have access to functions. For more advanced mathematics there are functions such as sin, cos and tan. Beyond this though there are predefined helper functions such as lighten and darken amongst many more.

h1 {
  color: rgb(230, 140, 230);   // color: #e68ce6;
  color: darken(#123456, 10%);   // color: #091a2c;
  color: fade(#123456, 50%);   // color: rgba(18, 52, 86, 0.5);
}

For a full list of built in functions, please see the links below:

LESS: http://lesscss.org/#reference

SASS: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html


Reusable Mixins

Mixins allow the grouping of multiple code lines together that can then be reused throughout the stylesheet. They can even be configured with variables to become very powerful.

.radius(@size: 5px) {
  -webkit-border-radius: @size;
  -moz-border-radius: @size;
  border-radius: @size;
}

.box { .radius; } .circle { .radius(15px); }

Compiles to:

.box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; 
}
.circle {
   -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px; 
}

 

Split Your Code into Multiple Files

In a large CSS project it is important to keep your code in defined sections. If you have a single CSS file, you can split the code by comments. Alternatively, you can split your code into multiple CSS files. This can be a disadvantage however as many files need to be delivered to your website visitors. LESS and SASS solve this by allowing you to include files into another.


The main file that you create should be included in the webpage, from this file all other style modules are imported. This leaves a single file to download by the visitor but styles are kept in a logical hierarchy.

# screen.less
@import “modules/ie.css”;
@import “modules/links.css”;
@import “modules/forms.css”;
@import “modules/header.css”;
@import “views/home.css”;


Final Compilation

In order to serve the final valid CSS file to the browser, the preprocessed code must first be compiled. In SASS the file is compiled using Ruby. In LESS the file can be compiled using node.js or if using the less.js script, directly in the browser. I would recommend only using the browser script version during development as it is only supported by modern browsers and compile the stylesheet for the live environment.


Node.js compilation:

lessc screen.less screen.css

Browser include:

<script src=”less.js” type=”text/javascript>
<link rel="stylesheet/less" type="text/css" href="screen.less">

 

For further reading on this topic, see how I structure the architecture of my CSS preprocessor projects in the article: An effective LESS.js file include pattern