LESS 是一种 CSS 预处理器，它可以让我们使用变量、参数、函数等高级特性来编写 CSS，从而提高我们的开发效率。在本文中，我们将重点讲解如何在 LESS 中使用变量和参数。
变量
在 LESS 中，可以使用 @ 符号来定义变量。下面是一个简单的例子：
@primary-color: #007bff;
.button {
background-color: @primary-color;
}这里我们定义了一个名为 @primary-color 的变量，并在 .button 类中使用它来设置背景颜色。在编译后，LESS 会将变量替换成对应的值，生成如下的 CSS 代码：
.button {
background-color: #007bff;
}除了普通的变量，我们还可以定义带有作用域的变量。作用域可以是全局的，也可以是局部的。例如：
-- -------------------- ---- ------- -------------- -------- ------- - ------------- -------- ----------------- -------------- ------ ------------- - ------- - ----------------- -------------- ------ ------------- -- -------- ------------ -- ------- ---- -- -
在上面的例子中，我们定义了一个全局变量 @global-color 和一个局部变量 @local-color。局部变量只在它所在的作用域内有效。在 #header 中，我们使用了 @global-color 和 @local-color，但在 #footer 中，我们只能使用 @global-color，因为 @local-color 只在 #header 中定义过。
参数
除了变量，LESS 还支持参数。参数允许我们定义一些可重用的样式，从而减少代码的重复。下面是一个例子：
-- -------------------- ---- ------- ------------------ -------- ------------ ----- - ----------------- ---------- ------ ------------ -------- ----- - --------------- - -------- - ----------------- - ----------------- -
在上面的例子中，我们定义了一个名为 .button() 的混合（mixin），它接受两个参数：@bg-color 和 @text-color。在 .button 中，我们使用了这两个参数来设置背景颜色、文本颜色和内边距。.primary-button 和 .secondary-button 都使用了 .button，但它们传递给 .button 的参数不同，从而生成不同的样式。
在 LESS 中，参数还可以是可变参数。可变参数允许我们传递任意数量的值，而不是固定的数量。例如：
-- -------------------- ---- ------- ------------------------ - ----------- --------- ---------------- --------- ------------------- --------- - ------- - ------------- - --- ------ - ----------------- - ------------- - --- ----- - - ---- ------ -
在上面的例子中，我们定义了一个名为 .box-shadow() 的混合，它接受可变参数 @shadows。在 .box-shadow 中，我们使用了 @shadows 来设置盒子阴影。.shadow 和 .multiple-shadows 都使用了 .box-shadow，但它们传递给 .box-shadow 的参数不同，从而生成不同的样式。
总结
在本文中，我们介绍了如何在 LESS 中使用变量和参数。变量允许我们定义可重用的值，从而简化样式的编写。参数允许我们定义可重用的样式，从而减少代码的重复。通过学习这些特性，我们可以更加高效地编写 CSS，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e62c5eb4cecbf2d42e4fc