该系列：

其他待更新...

翻译自less官方文档

变量

@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了，这在实现主题颜色时很有用