Question

Less 变量（Variables）

从这个章节开始我们开始学习有关 Less 语法特性的内容，Less 作为一种 CSS 的预编译语言，变量是不可或缺的一部分，因为后面的许多语法都会涉及到变量。同时变量的出现，可以帮助我们为重复出现的样式类或者属性值起一个便于我们理解的别名。

1. 什么是变量

Control commonly used values in a single location.——官方定义

慕课解释：变量作为 Less 的一个强大的功能，它可以让我们像在其它高级语言中一样声明变量，这样我们将重复出现的颜色，尺寸，选择器，字体名称和 URL 等存储起来。

2. 语法详情

在 CSS 的样式表中相同的属性或者属性值出现 N 次的情况并不少见，比如下面的这段代码：

.link {
  color: #428bca;
}

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

我们可以通过变量设置上面的颜色值，使我们的代码更易于维护。

语法格式：

// 语法
@key: 值;

首先声明一个变量表示这个颜色值，变量的 ‘key’ 需要在前面加上 ‘@’ 符号表示该属性是一个变量 ：

@link-color: #428bca;

我们再用这个变量去表示需要代替的属性值：

link {
  color: @link-color;
}

.widget {
  color: #fff;
  background: @link-color;
}

3. 使用场景

变量的使用场合主要为以下几种：

• 值变量
• 选择器变量
• 属性名变量
• URL 变量
• 声明变量
• 变量运算

3.1 值变量

值变量通常用于定义颜色值、字体大小等：

• 输入代码：

案例演示 预览 复制 复制成功！

@link-color: red;
@link-size : 24px;

.link {
  color    : @link-color;
  font-size: @link-size;
}

运行案例 点击 "运行案例" 可查看在线运行效果

• 输出代码：

.link {
  color    : red;
  font-size: 24px;
}

3.2 选择器变量

变量可以把选择器变为一个动态的选择器，同时也可以复用选择器中重复的字符，与常规用法不同的是在使用变量时需要用 ‘{}’ 把变量包裹起来。

• 输入代码：

案例演示 预览 复制 复制成功！

@sleName: container;

.@{sleName} {
  color: #fff;
}

#@{sleName} {
  color: #fff;
}

.top-@{sleName} {
  color: #fff;
}

运行案例 点击 "运行案例" 可查看在线运行效果

• 输出代码：

.container {
  color: #fff;
}

#container {
  color: #fff;
}

.top-container {
  color: #fff;
}

3.3 属性名变量

属性名变量同选择器变量的语法一致，可以帮助我们减少代码的书写量。

• 输入代码：

案例演示 预览 复制 复制成功！

@bg: background-color;

.container {
  @{bg}: red;
}

运行案例 点击 "运行案例" 可查看在线运行效果

• 输出代码：

.container {
  background-color: red;
}

3.4 URL 变量

文件的 URL 也可以作为一个变量，便于文件结构变化后修改文件路径。

• 输入代码：

案例演示 预览 复制 复制成功！

@util: "../util"

.container {
  background-image: src("@{util}/a.png");
}

运行案例 点击 "运行案例" 可查看在线运行效果

• 输出代码：

.container {
  background-image: src("../util/a.png");
}

3.5 声明变量

声明变量可以表示一段样式，类似于 Mixins（后续教程会提到），使用变量时需在后面加上 ‘()’。

• 输入代码：

案例演示 预览 复制 复制成功！

@bg: {background-color:red};

.container {
  @bg();
}

运行案例 点击 "运行案例" 可查看在线运行效果

• 输出代码：

.container {
  background-color:red;
}

3.6 变量运算

变量可以通过加减乘除等算法输出运算后的值。

1. 加减运算时以第一个数据的单位为准
2. 乘除运算注意保持单位的一致

• 输入代码：

案例演示 预览 复制 复制成功！

@width: 20px;

.container {
  width: @width/2;
}

运行案例 点击 "运行案例" 可查看在线运行效果

• 输出代码：

.container {
  width: 10px;
}

4. Tips

1. 变量是延迟加载的，所以可以不用提前声明。

• 输入代码：

	.a {
	  color: @color;
	}

	@color: red;

• 输出代码：

	.a {
	  color: red;
	}

2. 变量遵循就近原则，当有多个同名变量存在时，变量的值为最近定义的哪一个；同时如果在当前作用域未找到该变量，则会向上查找。

• 输入代码：

	@size: 20px;

	.container {
	  @size: 30px;
	  font-size: @size;
	}

• 输出代码：

	.container {
	  font-size: 30px;
	}

5. 个人经验

我们可以创建一个配置文件单独声明变量，利于我们维护代码。

类似于如下代码：

@default-color          : @theme-color;
@success-color          : #34BFA3;
@warning-color          : #FFE57F;
@error-color            : #F4516C;
@disabled-color         : #DEE2E6;
@selected-color         : fade(@default-color, 90%);
@tooltip-color          : #fff;
@subsidiary-color       : #80848f;
@rate-star-color        : #f5a623;

6. 总结

本个章节我们学习了 Less 中的变量，总的来说变量主要可以用在以下几个方面：

1. 值
2. 选择器
3. 属性名
4. URL
5. 规则集

通过变量代替出现频率较高值（一般来说出现两次以上），可以对这些值进行统一的维护和修改。