.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;
}
hidden1 {
.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; }
.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("{");
}
// Division vs. Literal Slash .border-radius(@r: 2px/5px) {
border-radius: @r;
} .slash-vs-math {
.border-radius(); .border-radius(5px/10px); .border-radius((3px * 2));
} // semi-colon vs comma for delimiting
.mixin-takes-one(@a) {
one: @a;
}
.mixin-takes-two(@a; @b) {
one: @a; two: @b;
}
.comma-vs-semi-colon {
.mixin-takes-two(@a : a; @b : b, c); .mixin-takes-two(@a : d, e; @b : f); .mixin-takes-one(@a: g); .mixin-takes-one(@a : h;); .mixin-takes-one(i); .mixin-takes-one(j;); .mixin-takes-two(k, l); .mixin-takes-one(m, n;); .mixin-takes-two(o, p; q); .mixin-takes-two(r, s; t;);
}
.mixin-conflict(@a:defA, @b:defB, @c:defC) {
three: @a, @b, @c;
}
.mixin-conflict(@a:defA, @b:defB, @c:defC, @d:defD) {
four: @a, @b, @c, @d;
}
named-conflict {
.mixin-conflict(11, 12, 13, @a:a); .mixin-conflict(@a:a, 21, 22, 23);
} @a: 3px; .mixin-default-arg(@a: 1px, @b: @a, @c: @b) {
defaults: 1px 1px 1px; defaults: 2px 2px 2px;
}
.test-mixin-default-arg {
.mixin-default-arg(); .mixin-default-arg(2px);
}
.mixin-comma-default1(@color; @padding; @margin: 2, 2, 2, 2) {
margin: @margin;
} .selector {
.mixin-comma-default1(#33acfe; 4);
} .mixin-comma-default2(@margin: 2, 2, 2, 2;) {
margin: @margin;
} .selector2 {
.mixin-comma-default2();
} .mixin-comma-default3(@margin: 2, 2, 2, 2) {
margin: @margin;
} .selector3 {
.mixin-comma-default3(4,2,2,2);
}
.test-calling-one-arg-mixin(@a) { }
.test-calling-one-arg-mixin(@a, @b, @rest…) { }
div {
.test-calling-one-arg-mixin(1);
}