@@ -388,19 +388,18 @@ scope are checked to see if they match based on what was passed to the mixin
388
388
and how it was declared.
389
389
390
390
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.
393
392
394
393
```less
395
- .simple() { // no argument mixin always included
394
+ .simple() { // matches no arguments
396
395
height: 10px;
397
396
}
398
397
399
- .simple(@a, @b) {
398
+ .simple(@a, @b) { // matches two arguments
400
399
color: red;
401
400
}
402
401
403
- .simple(@a) {
402
+ .simple(@a) { // matches one argument
404
403
color: blue;
405
404
}
406
405
@@ -413,6 +412,71 @@ argument mixins, which are always included.
413
412
}
414
413
```
415
414
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
+
416
480
Another way of controlling whether a mixin matches is by specifying a value in
417
481
place of an argument name when declaring the mixin:
418
482
@@ -593,7 +657,7 @@ mixin to work like a loop to generate a series of CSS blocks.
593
657
}
594
658
.spanX (0) {}
595
659
596
- // call it:
660
+ // mix it into the global scopee :
597
661
.spanX(4);
598
662
```
599
663
0 commit comments