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
|
/*
Less variables
*/
@a: 2;
@x: @a * @a;
@y: @x + 1;
@z: @x * 2 + @y;
.variables {
width: @z + 1cm; // 14cm
}
@b: @a * 10;
@c: #888;
@fonts: "Trebuchet MS", Verdana, sans-serif;
@f: @fonts;
@quotes: "~" "~";
@q: @quotes;
.variables {
height: @b + @x + 0px; // 24px
color: @c;
font-family: @f;
quotes: @q;
}
.redefinition {
@var: 4;
@var: 2;
@var: 3;
three: @var;
}
.values {
@a: 'Trebuchet';
@multi: 'A', B, C;
font-family: @a, @a, @a;
color: @c !important;
url: url(@a);
multi: something @multi, @a;
}
.variable-names {
@var: 'hello';
@name: 'var';
name: @@name;
}
.alpha {
@var: 42;
filter: alpha(opacity=@var);
}
/*
Lazy eval
*/
@lazy: @j;
@j: 100%;
.lazy-eval {
width: @lazy;
}
/*
Variable scoping
*/
@x: blue;
@z: transparent;
.scope1 {
@y: orange;
@z: black;
color: @x; // blue
border-color: @z; // black
.hidden {
@x: #131313;
}
.scope2 {
@y: red;
color: @x; // blue
.scope3 {
@local: white;
color: @y; // red
border-color: @z; // black
background-color: @local; // white
.scope4 {
@y: @z;
color: @y;
}
}
}
}
@gnegvar: 1px;
.negvar {
padding: -@gnegvar;
}
@a: 1px;
.varpad {
border-left: @a solid transparent;
border-right: @a solid transparent;
border-top: @a solid black;
}
/*
Names
*/
@1col: 12px;
.testname {
width: @1col;
}
|
