1.介绍
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。、】
2.less使用
1.创建index.less文件
2.在vscode中使用插件自动生成index.css文件
3.less编写
1.less运算符.可以使用加(+)减(-)乘(*)除(./)等运算符
div{
width:200px - 100px;
height:(200px / 2);
}
2.嵌套.可以通过父子嵌套的方式写css样式
div{
font-size: 14px;
div{
color: red;
}
&:hover{
color:pink;
}
}
3.变量 。@变量名:值;一般在Less文件最顶部声明变量,在CSS样式里可以调用变量
@color: red;
div{
a{
color: @color;
}
div{
h2{
color: @color;
font-size: 20px;
}
}
span{
display: inline-block;
color: @color;
}
}