Learn LESS in 10 Minutes (or Less)

We all know CSS can be a bit frustrating to write, especially when it comes to more serious projects with thousands of lines of code. You end up duplicating the same rules all over the place and using your editor's search and replace for every color change. It takes a lot of effort and discipline to keep your CSS maintainable. But it doesn't have to be this way.

Luckily, the web development community has solved this problem. We now have CSS pre-processors such as Less, Sass and Stylus. They give us a number of benefits over plain CSS:

• Variables, so that you can define and easily change values throughout your stylesheet. (This is actually coming to CSS some day.)
• Dynamically calculated values. (In CSS we recently got calc, but it is only for length units.)
• Mixins, which enable you to reuse and combine styles. They even support passing arguments.
• Functions, which give you a number of handy utilities for manipulating color, converting images to data-uris and more.

The negative aspect is that if you use one of these pre-processors, you will need to compile your stylesheets down to regular CSS so that it works in browsers.

1. Getting Started

Less is written in JavaScript, and needs either Node.js or a web browser to run. You can include less.js in your web site and it can compile all the linked .less stylesheets in real time, but this is slow and is not recommended. The recommended way is to compile your less stylesheets ahead of time and deploy a regular CSS file online. There are also a number of free graphical programs that can compile .less files for you, but in this article we will cover node.js.

If you have node installed, and you know what a terminal is, go ahead and open one. Then install less using NPM:

npm install -g less

This will give you access to the lessc command from any open terminal, enabling you to compile your .less files into vanilla CSS like this:

lessc styles.less > styles.css

Let's say we've written all our stylesheet rules with LESS in styles.less. With the above line, our code will be transformed to plain CSS in styles.css. All that is left is to link this css file our HTML. If there was a compilation mistake, it will show up in your terminal.

2. Variables

One of the main features of Less is the ability to create variables just like you would in a standard programming language. They can store any type of value you find yourself using frequently: colors, dimensions, selectors, font names, URLs and so on. The philosophy of less is to reuse the CSS syntax where possible.

Here, we define two variables, one for background color and one for text color, both containing hexadecimal codes. Switch between the tabs to see the translated to CSS version of the code:

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

p{
  background-color: #ffffff;
  color: #1A237E;
  padding: 15px;
}

ul{
  background-color: #ffffff;
}

li{
  color: #1A237E;
}

In the example above, the background color is white, while the text is dark. If, let's say, we want to switch them around and have dark elements with white text, we can simply change the values of the variables, instead of manually replacing every occurrence.

For more about variables in Less read here.

3. Mixins

LESS enables us to use an existing class or ids and apply all it's styles directly to another selector. The following example will clear things up:

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

If you don't want the mixin to appear as a rule in the CSS you can place parentheses after it:

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

Another cool thing mixins can do is receive parameters. In the following example we add an argument for the width and height of our circles, with a default value of 25 pixels. This will create a small circle 25x25 and a big one 100x100 pixels.

#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}

#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

Read more about Less mixins in their official documentation.

4. Nesting and Scope

Nesting can be used to structure your stylesheet in a way that matches the HTML structure of the page, while reducing the chance of conflicts. Here is an example of an unordered list and its children:

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

Just like in programming languages, in Less variables receive their values depending on the scope. If the value isn't specified in the specific scope, LESS will look for it in upper blocks until it finds the nearest declaration.

Translated to CSS, our li will have white colored text, since we've predefined strong>@text-color in the ul rules.

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #ffffff;
  border-radius: 3px;
  margin: 10px 0;
}

Learn more about scope here.

5. Operations

You can do basic math operations to numerical values and colors. Lets say we want to have two divs placed next to each other, the second one being twice as wide and with a different background. LESS knows what the measuring units are and won't mess them up.

@div-width: 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

div {
  height: 50px;
  display: inline-block;
}
#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

6. Functions

LESS has functions too! It's starting to look more and more like a programming language, isn't it?

Let's take a look at fadeout, a function that decreases the opacity of a color.

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

With the code above, when our div is hovered it will turn halfway transparent making mouse over transitions easier than ever. There are a lot of other useful functions for manipulating colors, detecting the size of images and even embedding assets as data-uri in the stylesheet. See the full list of functions here.

Further reading

You now know enough of Less to get started! Every CSS file is a valid Less stylesheet, so you can start cleaning up that old and unwieldy .css right away. As you learn more, you will be able to make the code even better. Here is what we recommend that you read next:

• All the language features - link
• LESS function reference - link
• Editor and compiler in the browser - link