LESS.js + @参数+跳过一个参数

Question

我一直在谷歌等搜索，但我找不到我要找的东西（我希望我没有忽略一些东西）..所以我想我最好的选择就是问你们:)

我正在玩 LESS-JS，我真的很喜欢它。不过我现在有一个小问题。

我正在使用 @arguments 变量，如下所示：

.basicBorder(@width:1px, @type:solid, @color:@black){
    border:@arguments;
}

它按预期工作。现在，当我希望边框为红色时，我将其添加到我的 css 中的元素中：

.basicBorder(1px, solid, @red);

这也按预期工作。但是，我想避免编写 1px,solid,，因为这些已经是我的默认值，但是当我尝试这个：

.basicBorder(@red);

或者这个：

.basicBorder(,,@red);

它不起作用。

所以我想知道是否有任何人知道如何“跳过”前两个变量，以便我可以输入颜色，以防我不希望更改边框宽度和类型。

我希望你明白我想说的！

问候！

Answer 1

实际上，您可以命名后面的参数并跳过前面的参数。您问题的语法是：

.basicBorder(@color:@red);

您还可以在开头使用正常的有序参数，并从其余参数中提取命名参数：

.basicBorder(2px, @color:@red);

这将 @width 设置为 2px， @type 为默认值，@color 为 @red。如果您有更多很少使用的参数，那就太好了。

Answer 2

LESS 中的参数混合的工作方式有点像 JavaScript 函数，你不能跳过第一个参数。因此，如果您只想更改颜色，您可以像这样重写 mixin：

.basicBorder(@color:@black, @width:1px, @type:solid){
    border:@width @type @color;
}

然后您可以这样调用它：

.basicBorder(@red);
.basicBorder(@red, 2px, dotted);

edit
使用你原来的mixin，你也可以创建这些

.basicBorderType(@type) {
    .basicBorder(1px, @type, @black);
}
.basicBorderColor(@color) {
    .basicBorder(1px, solid, @color);
}

现在你可以覆盖任何样式：

.basicBorderType(dotted); //1px dotted black;
.basicBorderColor(@red);  //1px solid red;
.basicBorder(2px);        //2px solid black;

有点黑客，但这是我能想到的唯一可以帮助你的东西......