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
|
@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;
}
.values {
minus-one: @var;
@a: 'Trebuchet';
@multi: 'A', B, C;
font-family: @a, @a, @a;
color: @c !important;
multi: something @multi, @a;
}
.variable-names {
@var: 'hello';
@name: 'var';
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);
}
|
