【less】Css预处理器

在vscode查阅less,会出现以下的这个插件，点击安装即可

查阅资料，会得知：

Sass和Less都属于Css预处理器，Css预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为Css增加一些编程的特性，将Css作为目标生成文件，然后开发者使用这种语言进行Css编码工作(用一种专门的编程语言，进行Web网页样式设计，再通过编译器转化为正常的Css文件，以供项目使用)。

基本的使用

我们有这样的两个文件夹

我们可以在.less文件下写我们的css代码，然后运用.less的一些语法，比如嵌套规则，命名空间等方便我们组织和维护，
而我们书写.less之后，我们的css会通过编译器转化为正常的Css文件，以供项目使用

举个例子

我们的less文件可以这样写

.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会通过编译器转化为正常的Css文件

.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;
}

这样我们就可以不用总是把元素的上一级写上去了，便于节约时间，代码结构也清晰。
再比如说,我们可以定义一个变量，只要在我们需要的地方引用即可。

我们的less文件书写如下：

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

那么相对应的css会自动编译为：

.app {
  color: red;
}

更多知识点可以查阅如下资料：

http://lesscss.cn/

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