Many CSS styles are repeated over and over while working on the design of a web site. It can become annoying, right? But, there is a solution. You can write less code using LESS and SASS CSS preprocessors.

What are CSS Preprocessors?

LESS (Leaner CSS) and SASS (Syntactically Awesome Style Sheets) are open source style sheet languages that allow variables, operators, functions, and many other techniques, which help create a more maintainable CSS.

Both LESS and SASS can be precompiled to plain CSS files or compiled on the server side, while LESS also supports real-time client-side compilation using less.js.

LESS Installation

LESS can be used via CLI (command-line interface) or client-side. For command-line usage, it first needs to be installed via node.js package manager:

npm install -g less

CSS is then compiled using the following code:

lessc styles.less > styles.css

If you want to output minified CSS, add -x parameter to the lessc command:

lessc styles.less > styles.css -x

The other way of using LESS is dynamic client-side compilation, where LESS style sheets are included in HTML:

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

After that, less.js is downloaded and included in HTML as well:

SASS Installation

Before installing SASS, you will have to install Ruby first. In Linux, that can be done through the apt package manager, while Windows users can use Ruby installer. Mac users can skip this step, as Ruby is pre-installed on this operating system.

After installing Ruby, execute the following command from the command prompt or terminal window:

gem install sass

Or, in case you get an error message:

sudo gem install sass

To compile a SASS style sheet to CSS, use the following command:

sass --watch --style=compressed style.scss:style.css

Variables in LESS

Variables in LESS are like constants in programming languages. They can be used to store a value and use it throughout the code. For example:

@nice-blue: #5B83AD;#header {  background: @nice-blue;}

This LESS code would output the following CSS code:

#header {  background: #5B83AD;}

Note that variables can be defined only once.

Variables in SASS

In SASS, variables begin with the dollar sign.

$nice-blue: #5B83AD;#header {  background: $nice-blue;}

Nested Rules in LESS and SASS

Both LESS and SASS allow nesting CSS rules, making the code more readable and similar to HTML structure.

#header {  background: #5B83AD;  .nav {    height: 60px;  }  .logo {    float: left;    width: 300px;  }}

This LESS code is the equivalent of:

#header {  background: #5b83ad;}#header .nav {  height: 60px;}#header .logo {  float: left;  width: 300px;}

While nesting the rules, parent selector (&) can be used:

a {  color: blue;  &:hover {    color: green;  }}

This LESS/SASS code is the same as:

a {  color: blue;}a:hover {  color: green;}

Operators in LESS and SASS

Any color, number or variable can be used as operands in mathematical operations. Let’s see a few simple examples:

@default-margin: 5px;@default-padding: @default-margin * 2;@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header {    background: @light-blue;    padding: @default-padding;}

The above LESS code is the same as the following CSS:

#header {    background: #6c94be;    padding: 10px;}

Operators are also supported in SASS.

Functions in LESS

LESS supports many functions which can transform colors, manipulate strings and do mathematical operations.

@base: #f04615;@width: 0.5;.class {  width: percentage(@width); // returns 50%  color: saturate(@base, 5%);  background-color: lighten(@base, 25%);}

The list of all functions in LESS can be found in function reference.

Functions in SASS

The functions from the LESS example are also available in SASS. To see the full list of SASS functions, check the SASS function reference.

Mixins in LESS

Mixins are “mix-ins” i.e. styles from one CSS id or class used in another id or class. Let’s see the example:

.heading {   text-align: center;   text-transform: uppercase;   font-family: Arial, sans-serif;   font-weight: bold;   margin: 0;}h1 {   font-size: 22px;   .heading;}

This code is the same as:

h1 {   text-align: center;   text-transform: uppercase;   font-family: Arial, sans-serif;   font-weight: bold;   margin: 0;   font-size: 22px;}

Mixins in SASS

SASS also supports mixins, but the syntax is slightly different. Mixings are defined using “@mixin” directive, and included using “@include” directive:

@mixin heading {   text-align: center;   text-transform: uppercase;   font-family: Arial, sans-serif;   font-weight: bold;   margin: 0;}h1 {   font-size: 22px;   @include heading;}

Conclusion

LESS and SASS are very similar style sheet languages, but using any of them will help you write better, more maintainable style sheets than you would using pure CSS.