LESS.js + @arguments + Skip One Argument

问题

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.

I am using the @arguments variable like this:

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

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);

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);

Or this:

.basicBorder(,,@red);

It doesnt work.

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!

Regards!

回答1:

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...

回答2:

You actually can name later parameters and skip the first ones. The syntax for your question is:

.basicBorder(@color:@red);

You can also use normal ordered arguments at the beginning and pluck out named arguments from the rest of the parameters:

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

This sets @width to 2px, @type to the default, and @color to @red. Really nice if you have more seldom used arguments.

来源：https://stackoverflow.com/questions/7726547/less-js-arguments-skip-one-argument

标签

css

less