Skip to content

Commit 1c30f88

Browse files
committed
docs for new varags syntax
1 parent c7d2c12 commit 1c30f88

File tree

1 file changed

+70
-6
lines changed

1 file changed

+70
-6
lines changed

docs/docs.md

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -388,19 +388,18 @@ scope are checked to see if they match based on what was passed to the mixin
388388
and how it was declared.
389389

390390
The simplest case is matching by number of arguments. Only the mixins that
391-
match the number of arguments passed in are used, with the exception of 0
392-
argument mixins, which are always included.
391+
match the number of arguments passed in are used.
393392

394393
```less
395-
.simple() { // no argument mixin always included
394+
.simple() { // matches no arguments
396395
height: 10px;
397396
}
398397

399-
.simple(@a, @b) {
398+
.simple(@a, @b) { // matches two arguments
400399
color: red;
401400
}
402401

403-
.simple(@a) {
402+
.simple(@a) { // matches one argument
404403
color: blue;
405404
}
406405

@@ -413,6 +412,71 @@ argument mixins, which are always included.
413412
}
414413
```
415414

415+
Whether an argument has default values is also taken into account when matching
416+
based on number of arguments:
417+
418+
```less
419+
// matches one or two arguments
420+
.hello(@a, @b: blue) {
421+
height: @a;
422+
color: @b;
423+
}
424+
425+
.hello(@a, @b) { // matches only two
426+
width: @a;
427+
border-color: @b;
428+
}
429+
430+
.hello(@a) { // matches only one
431+
padding: 1em;
432+
}
433+
434+
div {
435+
.hello(10px);
436+
}
437+
438+
pre {
439+
.hello(10px, yellow);
440+
}
441+
```
442+
443+
Additionally, a *vararg* value can be used to further control how things are
444+
matched. A mixin's argument list can optionally end in the special argument
445+
named `...`. The `...` may match any number of arguments, including 0.
446+
447+
```less
448+
// this will match any number of arguments
449+
.first(...) {
450+
color: blue;
451+
}
452+
453+
// matches at least 1 argument
454+
.second(@arg, ...) {
455+
height: 200px + @arg;
456+
}
457+
458+
div { .first("some", "args"); }
459+
pre { .second(10px); }
460+
```
461+
462+
If you want to capture the values that get captured by the *vararg* you can
463+
give it a variable name by putting it directly before the `...`. This variable
464+
must be the last argument defined. It's value is just like the special
465+
[`@arguments` variable](#arguments_variable), a space separated list.
466+
467+
468+
```less
469+
.hello(@first, @rest...) {
470+
color: @first;
471+
text-shadow: @rest;
472+
}
473+
474+
span {
475+
.hello(red, 1px, 1px, 0px, white);
476+
}
477+
478+
```
479+
416480
Another way of controlling whether a mixin matches is by specifying a value in
417481
place of an argument name when declaring the mixin:
418482

@@ -593,7 +657,7 @@ mixin to work like a loop to generate a series of CSS blocks.
593657
}
594658
.spanX (0) {}
595659

596-
// call it:
660+
// mix it into the global scopee:
597661
.spanX(4);
598662
```
599663

0 commit comments

Comments
 (0)