一、什么是less？

Less是CSS预处理语言，可以使用变量、嵌套、运算等，便于维护项目CSS样式代码。

二、less安装

使用npm包管理工具，全局安装less包

npm install -g less

less安装好的同时，lessc也安装好了

通过 lessc -v 可查看lessc的版本

lessc的作用：

        将less文件转成css文件

lessc 文件名.less 文件名.css

在VScode中配置less

1、在扩展中搜索Easy LESS并安装

2、点击设置找到Easy LESS，并在setting.json中编辑

3、在less.compile中添加配置项outExt

"less.compile": 
        
            "compress": false, // true => remove surplus whitespace
            "sourceMap": false, // true => generate source maps (.css.map files)
            "out": true, // false => DON'T output .css files (overridable per-file, see below)
           "outExt":".css" 
    },

配置完成后重启VScode即可

三、less语法

1、变量

变量可以当做普通的变量、选择器变量、属性变量、URL变量、声明变量来使用。

变量定义语法：

@变量名：值

变量使用语法：

@变量名

变量的作用域与JS中变量的作用域一致

普通变量

less：

@bgColor: #ffffff;

.div {
  background-color: @bgColor;
}

编译后的css：

.div {
  background-color: #ffffff;
}