介绍
less是一个CSS预处理器 less文件后缀是.less
扩充了CSS语言,使CSS具备一定的逻辑性、计算能力
注意:浏览器不识别less代码,网页要引入对应生成的css文件
vscode中可配合Easy Less插件使用,less文件保存自动生成css文件
注释
// 单行注释 无法生成到css中
/* 块注释 */
计算
less文件里支持计算
加减乘直接写
除法需要添加小括号或点.
.box {
width: 110 + 10px;
height: 100 - 10px;
font-size: 8 * 2px;
padding: (10 / 2px); // 工作常用
margin: 8 ./ 2px;
}
嵌套
less支持直接在父级里书写子级样式
.father{
color: red;
.son{
color: aqua;
/* &表示当前选择器 */
&:hover{
color: gold;
}
}
}
less写css有个巧妙地应用:激活状态和非激活状态
// 只有active时,颜色是红色;通过js增加unactive时,有两个类名,颜色是蓝色
.active{
color: red;
&.unactive{ // .active.unactive 这个巧妙
color: blue;
}
}
变量
// 1 定义变量
@color: #2c2cdd;
.box{
// 2 使用变量
color: @color;
}
导入其他less文件
@import './01-体验less.less'; // 可省略后缀.less
导出
方法1:修改vscode中easy less插件的json文件,统一生成css的路径
![](https://i-blog.csdnimg.cn/blog_migrate/ca867c015650b88feb74a3ae3a5d0b46.png)
方法2:在less文件第一行(必须)书写 // out: 路径
// out: ./abc/
禁止导出(生成css文件)
在less文件第一行(必须)书写 // out: false
// out:false