CSS 变量是一种非常有用的功能，可以让开发者在 CSS 中定义一些可重用的值，然后在需要的地方进行调用。但是，CSS 变量在一些浏览器上并不完全支持，而且语法也比较复杂。为了解决这个问题，我们可以使用 LESS 来实现 CSS 变量。
什么是 LESS
LESS 是一种 CSS 预处理器，它可以让开发者使用类似编程语言的方式来编写 CSS。LESS 有很多功能，比如变量、嵌套、函数、混合等等，可以让 CSS 的编写更加高效和灵活。
LESS 中的变量
在 LESS 中，我们可以使用 @ 符号来定义变量。比如，下面的代码定义了一个名为 primary-color 的变量，并将其值设置为 #007bff：
@primary-color: #007bff;
然后，在需要使用这个变量的地方，我们可以使用 @primary-color 来引用它。比如，下面的代码将按钮的背景色设置为 @primary-color：
button {
background-color: @primary-color;
}变量的作用域
在 LESS 中，变量有作用域的概念。如果变量在某个选择器内定义，那么它只在该选择器内有效。比如，下面的代码定义了一个名为 color 的变量，并将其值设置为 red：
h1 {
@color: red;
color: @color;
}
p {
color: @color;
}在这个例子中，@color 只在 h1 选择器内有效，所以 h1 的颜色会被设置为红色，而 p 的颜色不会受到影响。
变量的继承
在 LESS 中，变量可以被继承。比如，下面的代码定义了一个名为 base-color 的变量，并将其值设置为 #333，然后定义了一个名为 link-color 的变量，并将其值设置为 @base-color：
@base-color: #333; @link-color: @base-color;
这样，我们在需要使用 @link-color 的地方，就可以直接使用 @base-color。比如，下面的代码将链接的颜色设置为 @link-color：
a {
color: @link-color;
}使用变量的好处
使用变量的好处有很多。首先，它可以让代码更加简洁和易于维护。如果我们需要改变某个颜色或者尺寸，只需要修改变量的值就可以了，而不用去修改每一个使用该值的地方。其次，变量可以提高代码的可重用性。如果我们定义了一些常用的颜色或者尺寸，就可以在不同的地方重复使用，避免了代码冗余。
总结
LESS 是一种非常强大的 CSS 预处理器，可以让我们使用类似编程语言的方式来编写 CSS。其中的变量功能可以让我们更加高效和灵活地编写 CSS 代码，提高代码的可读性和可维护性。如果您还没有尝试过 LESS，不妨试一试，相信它会让您的前端开发之路更加愉快和高效。
示例代码：
-- -------------------- ---- ------- --------------- -------- ------ - ----------------- --------------- - -- - ------- ---- ------ ------- - - - ------ ------- - ------------ ----- ------------ ------------ - - ------ ------------ -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663425d1d3423812e41b2ef1