css预处理器-less配置

less是一个css预处理器，浏览器不识别less代码，所以我们在写less代码时为了方便生成css代码，在vscode中安装Easy LESS插件

安装插件后，在less中书写代码都会生成对应的css文件，下面是设置css的生成路径

默认情况下是生成在同一级文件下，如果改变所有css生成路径可以配置json。

打开vscode设置/搜索easy less/点进setting.json,然后就可以看见下图代码

在out中配置路径即可。

如果仅仅改变当前文件的css生成路径，可以在文件开头写：

// out: 文件路径

禁止导出

在less文件第一行添加： //out: false

导入其他less文件的话,在当前文件开头添加 @import 路径(less文件可以省略后缀)

less语法

 .box1 {
    width: (68 / 37.5rem); //除法计算方式
    // height: 29 ./ 37.5rem; 
}

//定义变量
@color: pink;

//嵌套
.father {
    color: @color;
    width: 100px;
    .son {
        color: aqua;
        &:hover { //&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
            color: #000;
        }
    }
}