Less学习教程三

这一节，详细讲变量的使用。为http://lesscss.org/features/内容变量部分的翻译，当然英文水平有限，有些地方就按自己的理解调整了一下措辞。

       变量

用于在某一个位置上替换常量值。说是变量，但是在定义好后，在Less的编写过程中，实际上是不能改变的，因此更像是“常量”。

         总览

经常可以在样式表中看到相同的值重复数十次甚至数百次：

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

变量使我们可以在一个位置定义它，从而使代码易于维护：

//定义变量
@link-color:        #428bca; //海洋蓝
@link-color-hover:  darken(@link-color, 10%);

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

          插值变量 

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

选择器

v1.4.0引入

// 变量
@my-selector: banner;

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

编译为：

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

网址

// 变量
@images: "../img";

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

导入声明

v1.4.0引入

句法： @import "@{themes}/tidal-wave.less";

请注意，在v2.0.0之前，仅考虑在根范围或当前范围中声明的变量，并且在查找变量时仅考虑当前文件和调用文件。

例：

// 变量
@themes: "../../src/themes";

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

属性

v1.6.0

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

编译为：

.widget {
  color: #0ee;
  background-color: #999;
}

          可变变量

在Less中，可以使用另一个变量来定义变量的名称。

@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}

编译为：

.section .element {
  color: green;
}

 

         懒惰定值

变量在使用之前不必声明。

有效的Less代码段：

.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

这在Less中是有效的：

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

@var: @a;
@a: 100%;

两者都编译成：

.lazy-eval {
  width: 9%;
}

重复定义变量时，将使用变量的最后定义，并从当前作用域向上搜索。这类似于css本身，在有效作用域定义的最后一个属性用于确定值。

例如：

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

编译为：

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

本质上，每个作用域都有一个“最终”值，类似于浏览器中的属性，像以下使用自定义属性的例子：

.header {
  --color: white;
  color: var(--color);  // the color is black
  --color: black;
}

这意味着，与其他CSS预处理语言不同，Less变量的行为与CSS的行为非常相似。

         属性作为变量（新！）

v3.0.0引入

您可以使用$prop语法轻松地将属性像变量一样对待。有时，这会使您的代码更简洁一些。

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

编译为：

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

请注意，像变量一样，Less将选择当前或父作用域范围内的最后一个属性作为“最终”值。

.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%);

// 引用library
@import "library.less";
@base-color: red;

由于延迟加载， @base-color被覆盖并且@dark-color为深红色。