Question

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

我第一次和LESS-JS一起玩，我真的很喜欢它。不过我现在有点问题。

我正在使用@arguments变量：

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

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

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

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

.basicBorder(@red);

或者这个：

.basicBorder(,,@red);

它不起作用。

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

我希望你得到我想说的话！

问候！

Answer 1

您实际上可以命名以后的参数并跳过第一个参数。您的问题的语法是：

.basicBorder(@color:@red);

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

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

这会将@width设置为2px，将@type设置为默认值，将@color设置为@red。如果你有更多的使用参数，真的很好。

Answer 2

LESS中的参数mixins与javascript函数类似，你不能跳过第一个参数。因此，如果您只想更改颜色，可以像这样重写mixin：

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

然后你就可以这样称呼它：

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

修改
使用原始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;

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

LESS.js + @arguments + Skip One Argument

2 个答案: