LESS 是一种 CSS 预处理器，它可以扩展 CSS 语法，引入变量、函数和操作符等特性，使得 CSS 更加灵活和易于维护。其中变量是一个非常重要的特性，可以帮助我们减少重复的代码，提高开发效率。下面就来介绍如何在 LESS 中使用变量。
定义变量
在 LESS 中，定义变量非常简单，只需要使用 @ 符号加上变量名和赋值即可：
--------------- -------- ----------------- -------- ------------ ---------------
上述代码定义了三个变量，其中 @link-color 的值是 @primary-color，也就是将一个变量赋值给另一个变量。在LESS中，变量名不需要加引号，而赋值的表达式也只需要用一个冒号表示。
使用变量
使用变量也非常简单，只需要在 CSS 中使用变量名代替原来的值即可，例如：
---- - ------ --------------- ----------------- ----------------- - - - ------ ------------ -
上述代码中用到了之前定义的三个变量，分别代表了页面主颜色、辅助颜色和链接颜色，可以在任何 CSS 选择器中使用它们。
变量操作
除了简单的变量赋值外，LESS 还支持各种变量操作，包括算术运算、颜色运算和字符串运算等。下面来介绍一些常用的变量操作：
算术运算
在 LESS 中可以对数字类型的变量进行加减乘除等运算，例如：
---------------- ----- ------------- --------------- - ----
上述代码中，@line-height 的值是 @base-font-size 的 1.5 倍，这里的乘号使用的是 *。
颜色运算
在 LESS 中还可以对颜色类型的变量进行运算，例如：
-------- -------- -------- -------- -------- ------- - --------
上述代码中，@color3 的值实际上是两个颜色值相加的结果，即 #ff00ff，可以看出 LESS 支持颜色值的加法运算。
字符串运算
在 LESS 中还可以对字符串类型的变量进行运算，例如：
-------- ---------------------- ----- ------- - -----------
上述代码中，@url 的值是 @prefix 和 "file.zip" 拼接起来的，即 http://example.com/file.zip。
总结
变量是 LESS 中一个非常重要的特性，可以帮助我们减少重复的代码，提高开发效率。在使用变量时，需要注意变量的作用域和变量操作的方式，例如变量名不需要加引号，而加减乘除等运算符号也不同于 CSS 的语法。掌握了 LESS 中的变量，可以使 CSS 更加灵活和易于维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64805ffc48841e9894fd8a2d