跳到主要内容

变量（Variables）

在单个位置控制常用值。

概述​

在样式表中，同一个值重复出现几十次甚至几百次并不罕见：

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;
}

URL​

// 变量
@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); // 颜色为黑色
  --color: black;
}

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

将属性作为变量使用 (NEW!)​

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

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

这很好用，因为有惰性加载-@base-color被覆盖，@dark-color是深红色。