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

问题描述

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

I have been searching in Google etc., but I couldnt find what I was looking for (I hope I didnt overlook something).. So I thought my best bet is to ask you guys :)

我第一次玩，我真的很喜欢。现在我有一个问题。

I am playing around with LESS-JS for the first time and I really like it. However I have a little problem now.

我使用 @arguments 变量：

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

现在当我想要边框是红色的，我添加到我的css中的元素：

Which works as expected. Now when I want the border to be red, I am adding this to the element in my css:

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

这也符合预期。但是我想避免写 1px，solid，，因为这些是我的默认值，但是当我尝试这样：

Which also works as expected. However I would like to avoid writing 1px, solid,, since these are my default values already, but when I try this:

.basicBorder(@red);

或：

.basicBorder(,,@red);

无效。

想知道如果any1知道我怎么可以跳过前2个变量，以便我可以只输入颜色，如果我不想要border-width和类型被改变。

So I was wondering if any1 knows how I could "skip" the first 2 variables so that I can just input the color in case I dont want the border-width and type to be changed.

我希望你能得到我想说的话。

I hope you get what I am trying to say!

谨慎！

推荐答案

LESS中的参数混合函数类似于javascript函数，你不能跳过第一个参数。所以如果你只想改变颜色，你可以这样重写mixin：

The parametric mixins in LESS works sorta like javascript functions, you can't skip the first parameters. So if you want to only change the color, you could rewrite the mixin like this:

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

然后你就可以这样调用：

Then you'd be able to call it like this:

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

编辑

使用原始混音也可以创建这些

edit
Using your original mixin, you could also create these

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

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

Now you could overwrite any of the styles:

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

有点黑客，但这是我唯一能想到的帮助你。 。

A bit of a hack, but it's the only thing I can think of to help you out...

这篇关于LESS.js + @arguments +跳过一个参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！