Less 变量

Less 变量是用于存储可重用值的容器。它们可以用来存储颜色、字体大小、边距等任何你可以想象到的值。使用变量可以使你的代码更简洁，更容易维护。

变量声明

在 Less 中，你可以通过 @ 符号来声明一个变量。变量名可以由字母、数字和下划线组成，但不能以数字开头。下面是一些有效的变量声明示例：

@main-color: #4D90FE;
@font-size: 16px;
@margin: 10px;

变量作用域

Less 支持局部变量和全局变量的概念。局部变量只能在其定义的范围内访问，而全局变量可以在整个文件或导入的文件中使用。

全局变量

全局变量在整个 Less 文件中都是可见的。例如：

@base-color: #333;

body {
  color: @base-color;
}

局部变量

局部变量只在特定的作用域内有效。它们通常用于函数内部或嵌套选择器中。例如：

// www.javascriptcn.com code example
body {
  @local-color: #333;
  color: @local-color;
}

// 这里的 @local-color 是不可见的
p {
  color: @local-color; // 编译错误，因为 @local-color 是局部变量
}

使用变量

变量可以像其他 CSS 属性值一样使用。它们可以与颜色混合、进行数学运算，甚至可以与其他变量组合。

数学运算

Less 支持在变量之间执行数学运算，这使得动态调整样式变得非常方便。例如：

@base-width: 100px;
@multiplier: 2;

.width {
  width: @base-width * @multiplier;
}

编译后的 CSS 将会是：

.width {
  width: 200px;
}

颜色混合

你可以使用颜色函数对变量进行操作，例如 darken 或 lighten 来调整颜色。例如：

// www.javascriptcn.com code example
@base-color: #4D90FE;
@dark-color: darken(@base-color, 10%);

.button {
  background-color: @base-color;
}

.dark-button {
  background-color: @dark-color;
}

组合变量

你也可以将多个变量组合在一起使用。例如：

@border-width: 1px;
@border-style: solid;
@border-color: #000;

.box {
  border: @border-width @border-style @border-color;
}

编译后的 CSS 将会是：

.box {
  border: 1px solid #000;
}

最佳实践

• 尽可能地使用变量来保持一致性。
• 在需要的地方使用局部变量以避免命名冲突。
• 使用有意义的名称来提高代码的可读性。
• 利用数学运算和颜色函数来简化复杂的计算。

通过使用变量，你可以极大地提高代码的可维护性和复用性。希望这个章节能帮助你更好地理解和使用 Less 变量！