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
@a: 2;
@x: (@a * @a);
@y: (@x + 1);
@z: (@x * 2 + @y);
@var: -1;
.variables {
width: (@z + 1cm); // 14cm
}
@b: @a * 10;
@c: #888;
@fonts: "Trebuchet MS", Verdana, sans-serif;
@f: @fonts;
@quotes: "~" "~";
@q: @quotes;
@onePixel: 1px;
.variables {
height: (@b + @x + 0px); // 24px
color: @c;
font-family: @f;
quotes: @q;
}
.redef {
@var: 0;
.inition {
@var: 4;
@var: 2;
three: @var;
@var: 3;
}
zero: @var;
}
@important-var: @c !important;
@important-var-two: @a !important;
.values {
minus-one: @var;
@a: 'Trebuchet';
@multi: 'A', B, C;
font-family: @a, @a, @a;
color: @c !important;
same-color: @important-var;
same-again: @important-var !important;
multi-important: @important-var @important-var, @important-var-two;
multi: something @multi, @a;
}
.variable-names {
.quoted {
@var: 'hello';
@name: 'var';
name: @@name;
}
.unquoted {
@var: 'hello';
@name: var;
name: @@name;
}
.color-keyword {
@red: 'hello';
@name: red;
name: @@name;
}
}
.alpha {
@var: 42;
filter: alpha(opacity=@var);
}
.polluteMixin() {
@a: 'pollution';
}
.testPollution {
@a: 'no-pollution';
a: @a;
.polluteMixin();
a: @a;
}
.units {
width: @onePixel;
same-unit-as-previously: (@onePixel / @onePixel);
square-pixel-divided: (@onePixel * @onePixel / @onePixel);
odd-unit: unit((@onePixel * 4em / 2cm));
percentage: (10 * 50%);
pixels: (50px * 10);
conversion-metric-a: (20mm + 1cm);
conversion-metric-b: (1cm + 20mm);
conversion-imperial: (1in + 72pt + 6pc);
custom-unit: (42octocats * 10);
custom-unit-cancelling: (8cats * 9dogs / 4cats);
mix-units: (1px + 1em);
invalid-units: (1px * 1px);
.fallback {
@px: 14px;
@em: 1.4em;
@cm: 10cm;
div-px-1: (@px / @em);
div-px-2: ((@px / @em) / @cm);
sub-px-1: (@px - @em);
sub-cm-1: (@cm - (@px - @em));
mul-px-1: (@px * @em);
mul-em-1: (@em * @px);
mul-em-2: ((@em * @px) * @cm);
mul-cm-1: (@cm * (@em * @px));
add-px-1: (@px + @em);
add-px-2: ((@px + @em) + @cm);
mul-px-2: ((1 * @px) * @cm);
mul-px-3: ((@px * 1) * @cm);
}
}