less
认识
- Less是一个 CSS预处理器, Less文件后缀为.less
- 浏览器不识别less文件,所以在VScode里使用Easy Less插件自动生成css文件
优点:
- css逻辑更加清晰
- 免去了繁琐的计算(直接写计算式就可)
注释
// 单行注释 CTRL+/ 不会跑到css中
/* 多行注释 Alt+shift+a 会跑到css中*/
语法
.box {
/* 加法 */
width: 100 + 30px;
/* 减法 */
width: 100 - 30px;
/* 乘法 */
width: 100 * 30px;
/* 除法 */
/* 注意:除法一定要加括号 */
width: (100 / 20px);
}
嵌套
.box {
width: 100px;
height: 100px;
background-color: green;
li {
width: 40px;
a{
color: blueviolet;
// &代表当前元素
&:hover {
color: aqua;
}
}
&::after {
content: '';
font-size: 20px;
}
}
}
花括号代表的是项目结构
变量
是一个容器,用来存放所需要的东西
语法:
- 定义变量:@变量名: 值;
- 使用变量:CSS属性:@变量名;
// 变量,修改起来更加简便,可以一次性修改相同变量名的内容
@color_top :pink;
@fonS: 12px;
@bd:1px solid #333;
.box {
background-color: @color_top;
}
.father {
color: @color_top;
p{
font-size: @fonS;
border: @bd;
}
}
Less文件的导入
语法:
@import "文件路径";
Less文件导出
方法一:
在设置里面打开setting.json
添加如下代码,就可以自动生成到css文件夹中
"less.compile": {
"out": "../css/"
},
方法二:
在Less文件中最上面添加:
// out: ./css/base.css
- 其中css是css文件保存的文件夹名,即css文件的保存路径
- base.css是在css文件夹下新建base.css文件
禁止导出
在Less文件中最上面添加:
// out: false