Adding Less (Leaner Style Sheets)

Less, standing for Leaner Style Sheets, is a language extension for CSS. It looks just like CSS, so it is extremely easy to pick it up in "less" time. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly. You can have variables, mixins, nesting, nested at-rules and bubbling, operations, functions, and so on in writing CSS with Less; for example, the following is what the variables look like:

@width: 10px;
@height: @width + 10px;

These variables can be used just like those in other programming languages; for example, you can use the preceding variables in the following way in your ordinary CSS:

#header {
  width: @width;
  height: @height;
}

The preceding code will be converted to the following CSS, which our browsers will understand:

#header {
  width: 10px;
  height: 20px;
}

It is very easy and neat, isn't it? In Nuxt, you can use Less as your CSS preprocessor by using the lang...