LESS 是一种动态样式语言，它扩展了 CSS，并添加了一些方便的功能。在 LESS 中，变量是一种非常有用的功能，可以使用它们来存储和重复使用值。本文将介绍 LESS 中常用的 3 种变量类型，分别是普通变量、参数（Parameter）变量和变量插值。
普通变量
普通变量是 LESS 中最常用的变量类型。使用 @ 符号来定义一个变量，并且可以在整个样式表中使用它。例如：
--------------- -------- ---- - ----------------- --------------- -
在上面的示例中，我们定义了一个名为 primary-color 的变量，并将其设置为 #007bff。然后，在 body 选择器中，使用 @primary-color 变量来定义背景色。使用普通变量可以大幅度减少代码冗余和重复编写的样式代码。
参数变量
参数变量也是 LESS 中非常有用的变量类型，它可以帮助我们更灵活地创建可重复使用的类、混合器和函数。参数变量使用 () 符号来定义。
----------------------- ---- - -------------- -------- - ----- - ----------------- -
在上面的示例中，我们定义了一个名为 .border-radius 的混合器，并给它定义了一个默认的参数 @radius，默认值为 5px。当我们在 .test 类中调用这个混合器时，没有为 @radius 参数传递任何值，所以默认值将被使用。这样在多处使用 .border-radius 混合器时，可以根据需要传递不同的参数值。
变量插值
变量插值是 LESS 中比较高级和灵活使用的变量类型。通常，我们在定义一个变量时，它只是一个简单的值。但有时，我们需要在一个变量值中包含另一个变量。在 LESS 中，可以使用 #{} 语法实现变量插值。
---------- ---- ------ ------ ------- -------- ----------- - -------- --------- -
在上面的示例中，我们定义了四个变量。 @selector 变量对应 CSS 中的 &， @rule 变量对应 CSS 中的属性名 color， @value 变量对应 CSS 中的属性值 #007bff。在 @{selector} 中我们使用了变量插值，将 @selector 变量中的值作为选择器，这里将会换成 & 的值，从而实现了选择器嵌套的功能。同样，我们通过使用 @{rule} 和 @{value} 变量插值，可以轻松地创建出符合我们预期的 CSS 代码。
总结
LESS 提供了多种灵活的变量类型，如普通变量、参数变量和变量插值，它们可以帮助我们更高效地编写样式代码。我们可以在变量中存储颜色、字体、大小等常用值，并且随时将其重复使用。使用参数变量可以创建灵活可重复使用的样式，而变量插值可以帮助我们在变量值中包含其他变量，使得样式表更加灵活和简洁。希望本文可以帮助你更好地掌握 LESS 变量的使用方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6472bd9d968c7c53b0054cef