less 語法大體上和css語法一致
瀏覽器無法直接執行less代碼
vscode 需要安裝 easy-less插件
// less 變量名語法
// @變量名
@color:green;
@width:100px;
@height:100px;
@box2:box2;
@path:"/source/img";
div{
width: @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{
width: 200px;
height: $width;
background-color: @color;
}