1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
// Stacking, functions..
.light (@a) when (lightness(@a) > 50%) {
color: white;
}
.light (@a) when (lightness(@a) < 50%) {
color: black;
}
.light (@a) {
margin: 1px;
}
.light1 { .light(#ddd) }
.light2 { .light(#444) }
// Arguments against each other
.max (@a, @b) when (@a > @b) {
width: @a;
}
.max (@a, @b) when (@a < @b) {
width: @b;
}
.max1 { .max(3, 6) }
.max2 { .max(8, 1) }
// Globals inside guards
@g: auto;
.glob (@a) when (@a = @g) {
margin: @a @g;
}
.glob1 { .glob(auto) }
// Other operators
.ops (@a) when (@a >= 0) {
height: gt-or-eq;
}
.ops (@a) when (@a =< 0) {
height: lt-or-eq;
}
.ops (@a) when not(@a = 0) {
height: not-eq;
}
.ops1 { .ops(0) }
.ops2 { .ops(1) }
.ops3 { .ops(-1) }
// Scope and default values
@a: auto;
.default (@a: inherit) when (@a = inherit) {
content: default;
}
.default1 { .default }
// true & false keywords
.test (@a) when (@a) {
content: "true.";
}
.test (@a) when not (@a) {
content: "false.";
}
.test1 { .test(true) }
.test2 { .test(false) }
.test3 { .test(1) }
.test4 { .test(boo) }
.test5 { .test("true") }
// Boolean expressions
.bool () when (true) and (false) { content: true and false } // FALSE
.bool () when (true) and (true) { content: true and true } // TRUE
.bool () when (true) { content: true } // TRUE
.bool () when (false) and (false) { content: true } // FALSE
.bool () when (false), (true) { content: false, true } // TRUE
.bool () when (false) and (true) and (true), (true) { content: false and true and true, true } // TRUE
.bool () when (true) and (true) and (false), (false) { content: true and true and false, false } // FALSE
.bool () when (false), (true) and (true) { content: false, true and true } // TRUE
.bool () when (false), (false), (true) { content: false, false, true } // TRUE
.bool () when (false), (false) and (true), (false) { content: false, false and true, false } // FALSE
.bool () when (false), (true) and (true) and (true), (false) { content: false, true and true and true, false } // TRUE
.bool () when not (false) { content: not false }
.bool () when not (true) and not (false) { content: not true and not false }
.bool () when not (true) and not (true) { content: not true and not true }
.bool () when not (false) and (false), not (false) { content: not false and false, not false }
.bool1 { .bool }
.equality-unit-test(@num) when (@num = 1%) {
test: fail;
}
.equality-unit-test(@num) when (@num = 2) {
test: pass;
}
.equality-units {
.equality-unit-test(1px);
.equality-unit-test(2px);
}
.colorguard(@col) when (@col = red) { content: is @col; }
.colorguard(@col) when not (blue = @col) { content: is not blue its @col; }
.colorguard(@col) {}
.colorguardtest {
.colorguard(red);
.colorguard(blue);
.colorguard(purple);
}
.stringguard(@str) when (@str = "theme1") { content: is theme1; }
.stringguard(@str) when not ("theme2" = @str) { content: is not theme2; }
.stringguard(@str) when (~"theme1" = @str) { content: is theme1 no quotes; }
.stringguard(@str) {}
.stringguardtest {
.stringguard("theme1");
.stringguard("theme2");
.stringguard(theme1);
}
.mixin(...) {
catch:all;
}
.mixin(@var) when (@var=4) {
declare: 4;
}
.mixin(@var) when (@var=4px) {
declare: 4px;
}
#tryNumberPx {
.mixin(4px);
}
|
