LESS 是一种动态样式语言，它可以使 CSS 更加简洁、易于维护。其中的 mixin 功能可以让我们在样式中复用一些常用的代码片段，以避免重复编写。在 mixin 中使用参数可以让我们更加灵活地控制样式的生成。本文将介绍如何在 LESS mixin 中使用参数。
语法
在 LESS 中，我们可以使用 @arguments 变量来访问 mixin 中的参数。@arguments 是一个类似数组的变量，包含了所有传递给 mixin 的参数。我们可以使用 @arguments[index] 来获取其中的某个参数，也可以使用 @arguments[-1] 来获取最后一个参数。
下面是一个使用参数的 mixin 示例：
.border-radius(@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.box {
.border-radius(10px);
}在这个例子中，我们定义了一个 border-radius 的 mixin，它接受一个参数 @radius，用于设置元素的圆角半径。在 .box 的样式中，我们调用了 border-radius mixin，并传递了参数 10px。
默认参数值
我们可以为 mixin 中的参数设置默认值，以便在调用 mixin 时可以不传递该参数。在 LESS 中，我们可以使用类似 JavaScript 的语法来为参数设置默认值，如下所示：
.border-radius(@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.box1 {
.border-radius;
}
.box2 {
.border-radius(10px);
}在这个例子中，我们为 border-radius 的参数 @radius 设置了默认值 5px。在 .box1 样式中，我们没有传递任何参数，因此 @radius 的值为默认值 5px。在 .box2 样式中，我们传递了参数 10px，因此 @radius 的值为 10px。
可变参数
有时候我们需要传递一个变长参数列表给 mixin，这时可以使用可变参数。在 LESS 中，我们可以使用 ... 来表示可变参数。下面是一个示例：
.box-shadow(@shadow...) {
box-shadow: @shadow;
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
}
.box1 {
.box-shadow(0 0 5px #888);
}
.box2 {
.box-shadow(0 0 5px #888, inset 0 0 10px #ccc);
}在这个例子中，我们定义了一个 box-shadow 的 mixin，它接受可变参数 @shadow，用于设置元素的阴影。在 .box1 样式中，我们传递了一个参数 0 0 5px #888，在 .box2 样式中，我们传递了两个参数 0 0 5px #888 和 inset 0 0 10px #ccc。
命名参数
有时候我们需要传递多个参数，并且它们的顺序很容易混淆，这时可以使用命名参数。在 LESS 中，我们可以使用 @name: value 的语法来表示命名参数。下面是一个示例：
.text-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
text-shadow: @x @y @blur @color;
}
.text1 {
.text-shadow;
}
.text2 {
.text-shadow(@color: red, @blur: 2px);
}在这个例子中，我们定义了一个 text-shadow 的 mixin，它接受四个命名参数 @x、@y、@blur 和 @color，分别表示阴影的水平偏移、垂直偏移、模糊程度和颜色。在 .text1 样式中，我们没有传递任何参数，因此使用了默认值。在 .text2 样式中，我们传递了两个命名参数 @color: red 和 @blur: 2px，其他参数使用默认值。
总结
在 LESS 中使用 mixin 参数可以让我们更加灵活地控制样式的生成。我们可以为参数设置默认值、使用可变参数和命名参数等功能。通过 mixin 的灵活使用，我们可以大大提高样式的复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c12970add4f0e0ffb1c178