作为一种 CSS 预处理器，LESS 不仅可以帮助我们简化样式表的编写，还可以增加代码的可读性和可维护性。其中，变量是 LESS 中的重要特性之一，它可以帮助我们快速定义并使用样式值。
但是，在实际使用中，我们需要了解 LESS 中变量作用域的概念，以及变量调用的顺序，才能更好地使用它。
变量作用域
LESS 中的变量作用域与常见的编程语言类似，它是指变量的生效范围。在 LESS 中，变量可以定义在全局作用域、局部作用域以及混合宏中。
全局作用域变量
在 LESS 文档中，全局作用域变量是指在所有样式表中均可访问的变量。通常，我们会在一个单独的 LESS 文件中定义全局变量，然后在其他文件中通过 @import 导入。
-- -------------------- ---- ------- -- -------------- -- --------------- -------- -- ---------- -- ------- ----------------- ----- - ------ --------------- -
在上面的示例中，@primary-color 变量定义在 variables.less 文件中，它是全局作用域变量。在 other.less 文件中，我们通过 @import 导入了 variables.less 文件，并在 link 类中使用了 @primary-color 变量。
局部作用域变量
局部作用域变量是指仅在定义它的选择器内部生效的变量。我们可以使用花括号 {} 将选择器的作用域限制在一定的范围内。
.button {
@primary-color: #1890ff;
background-color: @primary-color;
}在上面的示例中，@primary-color 变量定义在 .button 类的作用域内，它是局部作用域变量。这意味着，@primary-color 变量仅在 .button 类内部生效，并不会影响到其他样式。
混合宏变量
混合宏是 LESS 中的另一个重要特性，它允许我们将一些常用的样式块封装成函数然后进行复用。混合宏中也可以定义变量，这些变量的作用域同样限定在混合宏内部。
-- -------------------- ---- ------- -- ----------- -- ------ - --------------- -------- ----------------- --------------- - -- ---------- -- ------- -------------- -------
在上面的示例中，.btn() 是一个混合宏，它定义了一个 @primary-color 变量，并将其用于 background-color 样式中。在 other.less 文件中，我们通过 @import 导入了 button.less 文件，并在 .btn() 中调用了混合宏。此时，.btn() 中定义的 @primary-color 变量作用域限定在混合宏内部。
变量调用顺序
除了变量作用域，我们还需要了解 LESS 中变量调用的顺序。在 LESS 中，变量的调用顺序是由样式编写的顺序以及作用域的限制决定的。
当 LESS 编译器遇到变量调用时，它会按照以下顺序查找变量：
- 局部作用域变量：如果变量在当前选择器的作用域内被定义，则使用该变量。
- 混合宏变量：如果变量在当前调用的混合宏内部被定义，则使用该变量。
- 全局作用域变量：如果变量在任何 LESS 文件的作用域内被定义，则使用该变量。
- 参数变量：如果变量在当前选择器或混合宏的参数列表中被传入，则使用该变量。
- 默认值：如果变量没有被定义，则使用其默认值。
总结
通过本文，我们了解了 LESS 中变量作用域的概念及其调用顺序。当我们在编写 LESS 样式表时，需要注意变量的作用域限制以及调用顺序，以避免出现意想不到的结果。同时，我们也可以利用变量特性来提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e642f95b1f8cacd60b470