Why should I use Less?

Summary

Less is both a language and a preprocessor that can be used in place of CSS to create style sheets for your web projects.

Details

Let’s break things down further. Less is described on the official website as a “language extensions for CSS,” which means it’s a language based on CSS, but adds features to help you reuse code and keep your code more organized.

There is also Less.js, which is the JavaScript tool that lets you convert your Less code into CSS code. It can be used in the browser using the less.js file, or on the command line using npm. Less code has to be converted into CSS because browsers can’t read Less code directly, only CSS.

Here is an example of some Less code:

.custom-colors {
  background-color: green;
  color: yellow;
}

p {
  .custom-colors();
}

h1 {
  .custom-colors();
}

As stated above, the browser can’t read this code directly. However, when you install Less using npm and run it on the code above, it will generate the following CSS code:

.custom-colors {
  background-color: green;
  color: yellow;
}
p {
  background-color: green;
  color: yellow;
}
h1 {
  background-color: green;
  color: yellow;
}

Now you can link to the CSS style sheet in your web project and the browser can read your styles.

Less adds many features to your style sheets, such as variables, mixins, nesting, and imports. These features allow you to reuse code and write less code overall.

In some cases, CSS has some features similar to Less. For example, CSS also has variables. However, the syntax for writing CSS variables is fairly verbose, so using Less allows you to write less code compared to CSS.

Exercises

You can download exercises to go along with these tutorials on our Less exercises repository on GitHub. You don’t have to know how to use GitHub to use them. Just click the green Code button in the corner and click the Download ZIP option. Then unzip the folder and open it in your text editor.

Each module has a folder. Inside each module folder is a folder for each lesson. The lesson folders usually contain files already where you can put your code, although occassionally you will be asked to create files on your own.

NOTE: You can ignore the instructions included in the folders. The instructions are now listed directly in the lessons.