less使用variable

选择器和属性名

定义:@xxx:value;
exp:@color:black,@fontsize:14px
属性:当作key使用:
@{kuandu}:100px要加@{.....}前提是一定要定义了

image.png
image.png

作为url

定义:@imgurl:'https://www.baidu.com/img'

image.png
background:url(@{imgurl}pc_1c6e30772d5e4103103bd460913332f9.png)
image.png

变量延迟加载

变量放在前面和后面无所为,都是一样的效果

变量作用域

image.png

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 4; //=>4
  }
one:@var
  @var: aaa; //=>aaa
}

.class {
  one: aaa;
}
.class .brass {
  three: 4;
}