LESS 是一种 CSS 预处理器，它允许开发者使用变量、函数、嵌套等特性，来更加方便地编写 CSS。其中，使用变量是 LESS 的一个重要特性，它可以让开发者定义一些常用的样式值，然后在整个项目中都可以使用这些变量，从而方便地统一管理和调整样式。
定义变量
在 LESS 中，使用 @ 符号来定义变量。例如，我们可以定义一个名为 @primary-color 的变量，来表示网站的主色调：
--------------- --------
上面的代码定义了一个名为 @primary-color 的变量，它的值为 #2196F3。在整个 LESS 文件中，我们都可以使用 @primary-color 来代替 #2196F3。
使用变量
在 LESS 中，使用变量也很简单，只需要在需要使用变量的地方使用 @ 符号即可。例如，我们可以使用 @primary-color 来设置按钮的背景色：
---- - ----------------- --------------- -
上面的代码中，我们使用了 @primary-color 变量来设置按钮的背景色。这样，如果我们需要修改主色调，只需要修改 @primary-color 的值即可，所有使用了这个变量的地方都会自动更新。
变量作用域
在 LESS 中，变量有作用域的概念。默认情况下，变量的作用域是局部的，只在定义它的块级作用域内有效。例如，我们可以在一个选择器内定义一个变量：
---- - --------------- -------- ----------------- --------------- -
上面的代码中，@primary-color 变量只在 .btn 选择器内有效，它的作用域是局部的。如果我们在 .btn 外部使用 @primary-color，将会报错。
如果需要定义全局变量，可以使用 :global() 函数：
------- - --------------- -------- -
上面的代码中，我们使用 :global() 函数来定义全局变量 @primary-color。这样，在整个 LESS 文件中都可以使用 @primary-color 变量了。
变量计算
除了简单的变量定义和使用外，LESS 还提供了一些变量计算的功能，可以让我们更加方便地编写 CSS。例如，我们可以使用变量计算来定义一个宽度为 50% 的元素：
------- ----- -------- - ------ ------ - -- -
上面的代码中，我们定义了一个名为 @width 的变量，它的值为 100%。然后，在 .element 选择器内，我们使用了 @width / 2 计算表达式来设置元素的宽度，最终得到的宽度为 50%。
除了基本的加减乘除运算外，LESS 还支持一些函数，例如 darken()、lighten()、saturate()、desaturate() 等，可以用来对颜色值进行计算。例如，我们可以使用 darken() 函数来计算一个较暗的颜色：
--------------- -------- ----------------- ---------------------- -----
上面的代码中，我们使用 darken() 函数来计算一个较暗的颜色，它的参数为 @primary-color 和 10%。这样，我们就可以方便地计算出一些与主色调相关的颜色值。
总结
使用 LESS 的变量功能可以让我们更加方便地编写 CSS，并且可以实现样式的统一管理和调整。在使用变量时，需要注意变量的作用域和计算方式，以免出现错误。同时，变量计算和函数也是 LESS 的一个重要特性，可以帮助我们更加方便地编写 CSS。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6618d8bcd10417a22293d973