Less(v3.9.0)使用详解—变量

该系列：

Less(v3.9.0)使用详解——基本使用

Less(v3.9.0)使用详解——变量

Less(v3.9.0)使用详解——嵌套和父选择器&

Less(v3.9.0)使用详解——extend(嵌套)

其他待更新...

翻译自less官方文档lesscss.org/features/#v…

变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
复制代码

编译为

#header {
  width: 10px;
  height: 20px;
}
复制代码

变量还可以用在其他地方，比如选择器名称，属性名称，urls地址，@import导入语句

// Variables
@my-selector: banner;
@images: "../img";
@property: font-weight;

// Usage
.@{my-selector} {
  @{property}: bold;
  line-height: 40px;
  margin: 0 auto;
  background: url("@{images}/white-sand.png");
}
复制代码

编译为

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
  background: url("../img/white-sand.png");
}
复制代码

引用变量的变量

@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}
复制代码

编译为

.section .element {
  color: green;
}
复制代码

惰性求值，变量不用非得在使用之前声明，有点类似js的变量提升，当一个变量重复声明两次时，从当前作用域开始向上找，以最近作用域最后声明的为准

.lazy-eval {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;
复制代码

编译为

.lazy-eval {
  width: 9%;
}
复制代码

引用css属性值作为变量（v3.0.0），当遇到多个重复属性值时，规则同惰性求值

.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 
复制代码

编译为

.block {
  color: red; 
  color: blue;  
} 
.block .inner {
  background-color: blue; 
}
复制代码

由于类似变量提升，惰性求值的特性，能够实现改变某些库默认变量的功能

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red;
复制代码

此时base-color就变为red，而dark-color就变为dark red了，这在实现主题颜色时很有用