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