263 lines
3.8 KiB
Plaintext
263 lines
3.8 KiB
Plaintext
|
.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);
|
||
|
}
|
||
|
|
||
|
mixins-args-expand-op- {
|
||
|
@x: 1, 2, 3;
|
||
|
@y: 4 5 6;
|
||
|
|
||
|
&1 {.m3(@x...)}
|
||
|
&2 {.m3(@y...)}
|
||
|
&3 {.wr(a, b, c)}
|
||
|
&4 {.wr(a; b; c, d)}
|
||
|
&5 {.wr(@x...)}
|
||
|
&6 {.m4(0; @x...)}
|
||
|
&7 {.m4(@x..., @a: 0)}
|
||
|
&8 {.m4(@b: 1.5; @x...)}
|
||
|
&9 {.aa(@y, @x..., and again, @y...)}
|
||
|
|
||
|
.m3(@a, @b, @c) {
|
||
|
m3: @a, @b, @c;
|
||
|
}
|
||
|
|
||
|
.m4(@a, @b, @c, @d) {
|
||
|
m4: @a, @b, @c, @d;
|
||
|
}
|
||
|
|
||
|
.wr(@a...) {
|
||
|
&a {.m3(@a...)}
|
||
|
&b {.m4(0, @a...)}
|
||
|
&c {.m4(@a..., 4)}
|
||
|
}
|
||
|
|
||
|
.aa(@a...) {
|
||
|
aa: @a;
|
||
|
a4: extract(@a, 5);
|
||
|
a8: extract(@a, 8);
|
||
|
}
|
||
|
}
|
||
|
#test-mixin-matching-when-default-2645 {
|
||
|
.mixin(@height) {
|
||
|
height: @height;
|
||
|
}
|
||
|
|
||
|
.mixin(@width, @height: 10px) {
|
||
|
width: @width;
|
||
|
|
||
|
.mixin(@height: @height);
|
||
|
}
|
||
|
|
||
|
.mixin(@height: 20px);
|
||
|
}
|