标签：-- code 声明 加载 gre idt jpg 括号 需要
less中声明的变量可以存储css属性值，还可以存储选择器，属性名，url以及@imporant等
变量声明及赋值格式：@variableName : varableValue ;
//属性值
//less //变量 @pink:pink; .content{ color:@pink; }
编译成
.content{
color:#ffc0cb;//pink
}
//选择器
@selector:content; .@{selector}{ color:pink; } //或者
@sector:.content;
@{selector}{
color:pink;
}
//编译后都是 .content{ color:pink; }
一定要把定义的选择器变量名放在{}里面，并在花括号的前面加@
//url
@img:"../img/"; .content{ backgrond:url("@{img}/sea.jpg"); } //编译后 .content{ background:url("../img/sea.jpg"); }
在定义url变量时，注意将路径用引号扩起来；
／／属性名
@property:color; .content{ background-@{property}:green; a{ @{property}:white; } } //编译后 .content{ background-color:#00ff00; } .content a{ color:white; }
在less中可以用一个变量来定义另一个变量
@primary:red; .content{ @color:primary; background-color:@@color; } //或者 .content{ @color:@primary; background-color:@color; } //编译后都是 .content{ background-color:red; }
less 中的懒加载
即我们可以不需要在使用变量之前使用这个变量
@h:300px; .content{ width:@var; height:@h; } @var:9%; //编译后 .content{ width:9%; height:300px; }
当我们重复定义多个变量时，以当前作用域中最后定义的为准，若当前作用域没有定义，则逐级向上寻找；
@var: 0; .class { @var: 1; .brass { @var: 2; three: @var; @var: 3; } one: @var; } //编译后 .class { one: 1; } .class .brass { three: 3; }
在3.0版本中最新的利用$propertyName来获取属性值，有时候利用好了可以使代码看起来更简便
.widget { color: #efefef; background-color: $color; } //编译后 .widget { color: #efefef; background-color: #efefef; }
标签：-- code 声明 加载 gre idt jpg 括号 需要
原文地址：https://www.cnblogs.com/aniu-caili/p/9517236.html
