less 语法大体上和css语法一致
浏览器无法直接执行less代码
vscode 需要安装 easy-less插件
// less 变量名语法
// @变量名
@color:green;
@100px;
@height:100px;
@box2:box2;
@path:"/source/img";
div{
@width;
height: @height;
}
.box1{
background-color: @color;
}
// 当变量作为类名或者一部分值使用时，必须以@{变量名}的形式使用
.@{box2}{
color:@color;
background-image: url("@{path}/1.jpg");
background-size: cover;
}
.box3{
border: 1px solid @color;
}
// 引用width的值时 用$width;
.box4{
200px;
height: $width;
background-color: @color;
}