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