Less 变量是用于存储可重用值的容器。它们可以用来存储颜色、字体大小、边距等任何你可以想象到的值。使用变量可以使你的代码更简洁，更容易维护。
变量声明
在 Less 中，你可以通过 @ 符号来声明一个变量。变量名可以由字母、数字和下划线组成，但不能以数字开头。下面是一些有效的变量声明示例：
@main-color: #4D90FE; @font-size: 16px; @margin: 10px;
变量作用域
Less 支持局部变量和全局变量的概念。局部变量只能在其定义的范围内访问，而全局变量可以在整个文件或导入的文件中使用。
全局变量
全局变量在整个 Less 文件中都是可见的。例如：
@base-color: #333;
body {
color: @base-color;
}局部变量
局部变量只在特定的作用域内有效。它们通常用于函数内部或嵌套选择器中。例如：
-- -------------------- ---- ------- ---- - ------------- ----- ------ ------------- - -- --- ------------ ----- - - ------ ------------- -- ------- ------------ ----- -
使用变量
变量可以像其他 CSS 属性值一样使用。它们可以与颜色混合、进行数学运算，甚至可以与其他变量组合。
数学运算
Less 支持在变量之间执行数学运算，这使得动态调整样式变得非常方便。例如：
@base-width: 100px;
@multiplier: 2;
.width {
width: @base-width * @multiplier;
}编译后的 CSS 将会是：
.width {
width: 200px;
}颜色混合
你可以使用颜色函数对变量进行操作，例如 darken 或 lighten 来调整颜色。例如：
-- -------------------- ---- ------- ------------ -------- ------------ ------------------- ----- ------- - ----------------- ------------ - ------------ - ----------------- ------------ -
组合变量
你也可以将多个变量组合在一起使用。例如：
@border-width: 1px;
@border-style: solid;
@border-color: #000;
.box {
border: @border-width @border-style @border-color;
}编译后的 CSS 将会是：
.box {
border: 1px solid #000;
}最佳实践
- 尽可能地使用变量来保持一致性。
- 在需要的地方使用局部变量以避免命名冲突。
- 使用有意义的名称来提高代码的可读性。
- 利用数学运算和颜色函数来简化复杂的计算。
通过使用变量，你可以极大地提高代码的可维护性和复用性。希望这个章节能帮助你更好地理解和使用 Less 变量！