JezK
Edit File: mixins-args.less
.mixin (@a: 1px, @b: 50%) { width: @a * 5; height: @b - 1%; } .mixina (@style, @width, @color: black) { border: @width @style @color; } .mixiny (@a: 0, @b: 0) { margin: @a; padding: @b; } .hidden() { color: transparent; // asd } #hidden { .hidden; .hidden(); } .two-args { color: blue; .mixin(2px, 100%); .mixina(dotted, 2px); } .one-arg { .mixin(3px); } .no-parens { .mixin; } .no-args { .mixin(); } .var-args { @var: 9; .mixin(@var, @var * 2); } .multi-mix { .mixin(2px, 30%); .mixiny(4, 5); } .maxa(@arg1: 10, @arg2: #f00) { padding: @arg1 * 2px; color: @arg2; } body { .maxa(15); } @glob: 5; .global-mixin(@a:2) { width: @glob + @a; } .scope-mix { .global-mixin(3); } .nested-ruleset (@width: 200px) { width: @width; .column { margin: @width; } } .content { .nested-ruleset(600px); } // .same-var-name2(@radius) { radius: @radius; } .same-var-name(@radius) { .same-var-name2(@radius); } #same-var-name { .same-var-name(5px); } // .var-inside () { @var: 10px; width: @var; } #var-inside { .var-inside; } // # mixins #id-mixin () { color: red; } .id-class { #id-mixin(); #id-mixin; } .mixin-arguments (@width: 0px, ...) { border: @arguments; width: @width; } .arguments { .mixin-arguments(1px, solid, black); } .arguments2 { .mixin-arguments(); } .arguments3 { .mixin-arguments; } .mixin-arguments2 (@width, @rest...) { border: @arguments; rest: @rest; width: @width; } .arguments4 { .mixin-arguments2(0, 1, 2, 3, 4); } // Edge cases .edge-case { .mixin-arguments("{"); }