less变量用法讲解

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;

}