Less变量

变量(Variables)

overview

相同的值在CSS中重复几十次甚至数百次并不罕见：

a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}

变量提供了一种从单个位置控制这些值的方法，从而使代码更容易维护。

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

变量替换

上面的例子着重于在CSS规则中使用变量来控制值，但是它们也可以用于其他地方，比如选择器名称、属性名称、url和 @import 语句。

选择器

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

URLs

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

Import

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

此外，可以使用另一个变量定义一个变量的名字：

@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}

//相当于
.section .element {
  color: green;
}

变量提升

变量可以在使用之后声明：

//写法一
.lazy-eval {
  width: @var;
}
@var: @a;
@a: 9%;

//写法二
.lazy-eval {
  width: @var;
  @a: 9%;
}
@var: @a;
@a: 100%;

//编译为
.lazy-eval {
  width: 9%;
}

当定义一个变量两次时，将使用该变量的最后一个定义，并从当前范围向上搜索：

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

//编译为
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

属性作为变量

使用$prop语法可以很容易地将属性当作变量来处理：

.widget {
  color: #efefef;
  background-color: $color;
}

注意：与变量一样，Less将选择当前/父范围内的最后一个属性作为最终值

.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 

//编译为
.block {
  color: red; 
  color: blue;  
} 
.block .inner {
  background-color: blue; 
}

缺省变量

有时候需要缺省变量，只有在变量尚未设置时才可以设置它，但这个特性不是必需的。

// 书写一个library.less文件
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red;

//加载之后，@base-color被覆盖设置为红色