css – LESS.js @arguments Skip One Argument

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

我第一次玩LESS-JS,我真的很喜欢它.但是我现在有点问题.

我正在使用这样的@arguments变量：

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

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

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

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

.basicBorder(@red);

或这个：

.basicBorder(,,@red);

它不起作用.

所以我想知道是否any1知道如何“跳过”前两个变量,这样我就可以输入颜色,以防我不想更改边框宽度和类型.

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

问候！

LESS中的参数混合有点像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;

有点黑客,但这是我能想到的唯一帮助你的东西……