LESS 中如何重载变量
LESS 是一种 CSS 预处理器，它提供了许多便利的功能，其中之一就是变量。变量使得我们可以在 CSS 中使用类似于编程语言中的变量，从而可以更好地组织代码和管理样式。但是有时候，我们需要在不同的地方使用不同的变量值。这时候，我们就需要重载变量。
重载变量的方式有两种：
- 局部变量
局部变量是在一个选择器或者一个块级作用域内定义的变量。它的作用范围仅限于这个选择器或者块级作用域内。如果在这个选择器或者块级作用域内重新定义了这个变量，那么在这个作用域内使用这个变量时，就会使用重新定义的值。
例如：
-- -------------------- ---- -------
---------- -
------- ----
---- -
------ -------
------- ------
----------------- -------
-
----- -
------ -------
-
-在上面的代码中，我们在 .container 中定义了一个局部变量 @color，初始值为 red。在 .box 中，我们使用了这个变量，并且重新定义了它的值为 green。因为 .box 是 .container 的子元素，所以它可以访问 .container 中定义的变量。在 .box 中，color 的值为 red，因为在 .box 重新定义 @color 的值之前，它的值是 red。而 background-color 的值为 green，因为在 .box 中重新定义了 @color 的值。
在 .box2 中，我们再次使用了 @color，此时它的值为 green，因为在 .box 中重新定义了它的值，这个值一直保持到 .container 结束。
- !important
!important 是 CSS 中的一个关键字，它可以让一个属性的值优先级最高，即使这个属性的优先级比它低的其他属性的优先级高。在 LESS 中，我们可以使用 !important 来重载变量。
例如：
-- -------------------- ---- ------- ------- --- ----------- ---------- - ------ ------- - ---- - ------- ------ ------ ------- -
在上面的代码中，我们在全局定义了一个变量 @color，并且使用了 !important 关键字。这意味着无论在哪个地方使用 @color，它的值都是 red。在 .container 中，我们使用了这个变量，color 的值为 red。在 .box 中，我们重新定义了 @color 的值为 green，但是由于全局定义的 @color 使用了 !important，所以它的值仍然是 red。在 .box 中，color 的值为 red。
总结
重载变量是 LESS 中非常实用的功能。通过使用局部变量或者 !important，我们可以在不同的地方使用不同的变量值，从而更好地组织代码和管理样式。
示例代码
-- -------------------- ---- -------
------- ----
---------- -
------- ------
---- -
------ -------
------- -----
----------------- -------
-
----- -
------ -------
-
-
-------- --- -----------
----------- -
------ --------
-
----- -
-------- ------
------ --------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65741433d2f5e1655dd4d10e