Less CSS, please explain to me the advanced arguments and the @rest variable?

Question

A simple question: I do not understand what the additional arguments in Less CSS do, according to http://lesscss.org/features/#mixins-parametric-feature-advanced-arguments-and-the-rest-variable . I fought to tell me how it is explained.

I understand it:

.mixin(@a: 1) { 

But I do not understand the following two where it is introduced ...:

 .mixin(...) { // matches 0-N arguments .mixin() { // matches exactly 0 arguments .mixin(@a: 1) { // matches 0-1 arguments .mixin(@a: 1; ...) { // matches 0-N arguments .mixin(@a; ...) { // matches 1-N arguments 

.mixin (@a; @rest ...) {// @ rest linked to arguments after @a
// @ arguments bound to all arguments}

I study less because I'm very interested in downloading, but it puzzled me.

Many thanks!

Answer 1

Good, good, you should also read http://lesscss.org/features/#mixins-parametric-feature-pattern-matching .

In Less, only mixin that match the number of caller arguments compiles. Also note that when two or more mixes match, they are all compiled into CSS.

When you mix one argument as shown below:

 .mixin(@a) {} 

Only subscribers with one argument match and will be compiled: .mixin(3); or .mixin(1) .mixin(3); or .mixin(1) etc. But NOT .mixin() or .mixin(1,2,3)

When you set the default value for the first argument, for example 3 , as shown below:

 .mixin(@a: 3) {} 

Now, not only calls with 1 argument match, but also calls with zero arguments:

 .mixin(@a: 3) {property: @a;} p{ .mixin();} 

outputs:

 p { property: 3; } 

Now consider a special argument ... , this argument matches any number of arguments. Thus .mixin(...) will match and compile the following subscribers .mixin() , .mixin(1) and .mixin(1,2,3,4) .

When adding a name (including @ ) to the argument ... values ​​will be assigned to a variable with the same name:

 .mixin(@listofvariables...) { p: @listofvariables; } p { .mixin(one; two; three); } 

outputs:

 p { p: one two three; } 

Note that ... assigns arguments to the list, which can also be manipulated using list functions .

A mixin, such as .mixin(@a; ...) , is a variant of the previous two use .mixin(@a; ...) . This mixins requires a first set of arguments, followed by zero or any other arguments.

@arguments is a special variable containing a list of all mixin arguments:

 .mixin(@a; @b) {p1: @arguments; p2:extract(@arguments,2); p3:@b;} p {.mixin(1; 2);} 

outputs:

 p { p1: 1 2; p2: 2; p3: 2; } 

Thus, the @arguments variable can be used in any mixin and does not require an argument ...

What would the caller look like for such a mix? .Mixin (@a; ...) could be something like this: .mixin (@a, 53px) ;? How to do this determine where 53px goes?

53px is not assigned to a variable, but it is the second item in the @arguments list. You can get it extract(@arguments,2) .

An example of using .mixin(@a; ...) {} can be property assignment whenever .mixin() independent of the number of arguments, for example:

 .mixin(@a; ...) { color: @a;} .mixin(@a) { background-color: contrast(@a); width:100%;} .mixin(@a; @b;) { background-color: contrast(@a); width:@b;} div { .mixin(red); } div.small { .mixin(red,50%); } 

outputs:

 div { color: red; background-color: #ffffff; width: 100%; } div.small { color: red; background-color: #ffffff; width: 50%; } 

note that .mixin(@a; @rest...) {} assigns 35px first element of the @rest list. So the following Less code:

 .mixin(@color,@padding...) { color: @color; padding: @padding } div { .mixin(red; 10px; 20px; 5px; 5px); } 

outputs:

 div { color: red; padding: 10px 20px 5px 5px; }