常见的css预处理器开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，本文主要讲解目前三种

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

在平时开发过程中，css编写效率不高，于是就有了css预处理器的诞生。CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成的程序。目前主要有三种流行的css预处理器，会增加一些原生 CSS 不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让 CSS 的结构更加具有可读性且易于维护。

3种常见的css预处理器

变量定义方面的不同：

less
```
@color:red;
```
sass
```
$color:red;
```
stylues：声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有等号。

作用域方面的不同

css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js 一样，它会先从局部作用域查找变量，依次向上级作用域查找。

Sass：不存在全局变量的概念。
Less：跟 JS 一样，逐级查找，向上冒泡。
Stylus：完全等同 Less。Stylus 和 Sass 则更倾向于指令式。

本文就选择其中的less作为主要入口进行总结记录。

less的执行过程

编写符合less语法的less文件

less语法是完全兼容css语法，在less文件中，可以直接写css语法。

使用工具将 less文件编译成 css文件

在vsCode中拓展工具中搜索less，搜索到Easy LESS选择安装即可。

在网页当中引用编译好的 css文件

语法

变量

声明变量

@bgColor:blue;

@font:25px;

使用变量

background-color: @bgColor;
font-size: @font;
.main{
  background-color: @bgColor;
  font-size: @font;
}
footer{
  background-color: @bgColor;
  font-size: @font; 
}

嵌套

div {
  background-color: red;
  /* 在less的嵌套中，要写带有冒号的选择器的时候 都要在冒号前面
加一个 “&”
 */
  &:before {
    content: "呵呵";
  }
  > p {
    background-color: palevioletred;
    a {
      background-color: black;
      span {
        background-color: yellow;
      }
    }
  }
  > .red_cls {
    background-color: red;
  }
}