LESS 中常用的 3 种变量类型-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种动态样式语言，它扩展了 CSS，并添加了一些方便的功能。在 LESS 中，变量是一种非常有用的功能，可以使用它们来存储和重复使用值。本文将介绍 LESS 中常用的 3 种变量类型，分别是普通变量、参数（Parameter）变量和变量插值。

普通变量

普通变量是 LESS 中最常用的变量类型。使用 @ 符号来定义一个变量，并且可以在整个样式表中使用它。例如：

@primary-color: #007bff;
body {
  background-color: @primary-color;
}

在上面的示例中，我们定义了一个名为 primary-color 的变量，并将其设置为 #007bff。然后，在 body 选择器中，使用 @primary-color 变量来定义背景色。使用普通变量可以大幅度减少代码冗余和重复编写的样式代码。

参数变量

参数变量也是 LESS 中非常有用的变量类型，它可以帮助我们更灵活地创建可重复使用的类、混合器和函数。参数变量使用 () 符号来定义。

.border-radius(@radius: 5px) {
  border-radius: @radius;
}
.test {
  .border-radius();
}

在上面的示例中，我们定义了一个名为 .border-radius 的混合器，并给它定义了一个默认的参数 @radius，默认值为 5px。当我们在 .test 类中调用这个混合器时，没有为 @radius 参数传递任何值，所以默认值将被使用。这样在多处使用 .border-radius 混合器时，可以根据需要传递不同的参数值。

变量插值

变量插值是 LESS 中比较高级和灵活使用的变量类型。通常，我们在定义一个变量时，它只是一个简单的值。但有时，我们需要在一个变量值中包含另一个变量。在 LESS 中，可以使用 #{} 语法实现变量插值。

@selector: `&`;
@rule: color;
@value: #007bff;
@{selector} {
  @{rule}: @{value};
}

在上面的示例中，我们定义了四个变量。 @selector 变量对应 CSS 中的 &， @rule 变量对应 CSS 中的属性名 color， @value 变量对应 CSS 中的属性值 #007bff。在 @{selector} 中我们使用了变量插值，将 @selector 变量中的值作为选择器，这里将会换成 & 的值，从而实现了选择器嵌套的功能。同样，我们通过使用 @{rule} 和 @{value} 变量插值，可以轻松地创建出符合我们预期的 CSS 代码。

总结

LESS 提供了多种灵活的变量类型，如普通变量、参数变量和变量插值，它们可以帮助我们更高效地编写样式代码。我们可以在变量中存储颜色、字体、大小等常用值，并且随时将其重复使用。使用参数变量可以创建灵活可重复使用的样式，而变量插值可以帮助我们在变量值中包含其他变量，使得样式表更加灵活和简洁。希望本文可以帮助你更好地掌握 LESS 变量的使用方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6472bd9d968c7c53b0054cef