CSS precompiler

The basic principle of

When writing CSS, it is often difficult to deal with some problems due to the limitations of the CSS language itself:

  • Duplicate style values: e.g. common color, common size
  • Repetitive code snippets: such as absolutely center, clear float
  • Repeat nested writing

As officials have been slow to make changes to the CSS language itself, a number of third parties have begun to address these issues

One such solution is the precompiler

The principle of a precompiler is simple: a more elegant way to write style code, using a compiler to translate it into traditional CSS code that can be recognized by the browser

CSS precompiler

At the moment, the most popular precompilers are LESS and SASS

Chinese Document 1 (unofficial) : Lesscss.cn/less Chinese Document 2 (unofficial) : Less.bootcss.com/ sass Chinese Document 1 (unofficial) : Lesscss.com/ Sass www.sass.hk/ Sass Chinese Document 2 (unofficial) : sass.bootcss.com/

Installation and use of LESS

As a rule of principle, to use LESS, you must install the LESS compiler

The LESS compiler is based on Node and can be downloaded and installed via NPM

npm i -D less
Copy the code

Once less is installed, it provides a CLI tool, Lessc, with which to compile

Lessc less Code file A compiled fileCopy the code

Give it a try:

Create a new index.less file and write the following:

/ / less code
@red: #f40;

.redcolor {
    color: @red;
}
Copy the code

Run command:

lessc index.less index.css
Copy the code

You can see the compiled code:

.redcolor {
  color: #f40;
}
Copy the code

Basic use of LESS

For details, see less.bootcss.com/

  • variable
  • hybrid
  • nested
  • operation
  • function
  • scope
  • annotation
  • The import