Getting Started With LESS

10th February 2017

LESS is one of the most popular CSS pre-processors used in modern web development. This article will show you how to download and assist you in getting started with LESS, including using a few basic commands.

Download LESS

The easiest way to download LESS is via npm. You can run the following command within your terminal.

$ npm install -g less

After successfully installing, you will then be able to use the lessc command.

Let’s assume that you have created a blank styles.less file. To output the compiled CSS to a .css file of your choice, run lessc passing in the .less file and the output file as the first and second arguments.

$ lessc styles.less styles.css

You can run this command whenever you need to compile the contents of the .less file into the .css file.

Variables

In LESS, you can define variables using @. This is different to using $ in SASS but they both achieve the same goal.

@defaultBlue: #5B83AD;

.container {
  background-color: @defaultBlue;
}

Nested Rules

LESS also gives us the ability to use nested rules when writing our CSS. This means that instead of writing cascading rules specifying multiple classes such as:

.container {
    font-size: 14px;
}
.container .sub {
    font-size: 12px;
}

We are now able to nest rules inside one another.

.container {
    font-size: 14px;
    .sub {
        font-size: 12px;
    }
}

The syntax above and is more clean, and mimics the characteristics of your HTML structure.

You can then run the lessc styles.less styles.css command again to update your styles.css file.

If you would like to output the CSS to a minified styles.min.css file, you can install the Clean CSS plugin.

$ npm install -g less-plugin-clean-css

You will then be able to pass in the --clean-css argument.

$ lessc --clean-css styles.less styles.min.css

So there are the basics. Future articles will cover more information on variables, nesting, mixins and more, but for now, enjoy writing CSS more quickly and efficiently with this great preprocessor.