【Less】 Css preprocessor

Check less in vscode, the following plug-in will appear, click install

Checking the information, you will know:

Both Sass and Less belong to the Css preprocessor. The Css preprocessor defines a new language. The basic idea is to use a special programming language to add some programming features to Css. Use Css as the target to generate files, Developers use this language for Css coding (using a special programming language to design Web pages, and then convert it to a normal Css file through a compiler for the project to use).

Basic use

We have such two folders.

We can write our css code under the .less file, and then use some .less syntax, such as nesting rules, namespaces, etc., to facilitate our organization and maintenance,
and after we write .less, Our css will be converted into normal Css file by the compiler for the project to use

for example

Our less file can be written like this

.header {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border-bottom: 1px solid #e1e1e1;

    .header_con {
        width: 1200px;
        height: 100px;
        margin: 0 auto;
        line-height: 100px;

        .header_img {
            margin-top: 32px;
            float: left;
            cursor: pointer;
            width: 153px;
        }

css will be converted into normal Css files by the compiler

.header {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  border-bottom: 1px solid #e1e1e1;
}
.header .header_con {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
}
.header .header_con .header_img {
  margin-top: 32px;
  float: left;
  cursor: pointer;
  width: 153px;
}

This way we don't have to always write the upper level of the element, which is convenient to save time and the code structure is clear.
As another example, we can define a variable as long as it is referenced where we need it.

Our less file is written as follows:

@base:red;
.app{
    color:@base
}

Then the corresponding css will be automatically compiled as:

.app {
  color: red;
}

For more knowledge points, please refer to the following information:

http://lesscss.cn/

https://www.jianshu.com/p/6489e28e548e