.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("{");
}