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
|
/*
Args nested
*/
.a(@radius) {
radius: @radius;
}
.b(@radius) {
.a(@radius);
}
.c(@radius) {
.b(@radius);
}
.d(@radius) {
.c(@radius);
}
#e {
.d(5px);
}
// kwarg
.f(@radius: 1px) {
radius: @radius;
}
.g(@radius) {
.f(@radius);
}
.h(@radius) {
.g(@radius);
}
.i(@radius: 1px) {
.h(@radius);
}
#j {
.i(5px);
}
#k {
.i();
}
//
// Nested
//
.nested-ruleset (@width: 200px) {
width: @width;
.column {
margin: @width;
&.blue {
color: blue;
.deep {
padding: @width;
}
}
}
}
.content {
.nested-ruleset(600px);
}
.content-em {
.nested-ruleset();
}
.nested-2(@width: 300px) {
width: @width;
.nested-ruleset(@width);
}
.test-2 {
.nested-2();
}
.test-2-em {
.nested-2(600px);
}
/*
Inner nested mixins
*/
.outer {
.inner(@width) {
padding: @width;
}
.innerkwarg(@width: 3px) {
margin: @width;
}
}
.tx {
.outer .inner(3px);
.outer .innerkwarg(1px);
}
.ty {
@width: 7px;
.outer .inner(@width);
.outer .innerkwarg();
}
#font {
#family {
.serif() {
font-family: Georgia, "Times New Roman", Times, serif;
}
}
.serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
#font > #family > .serif;
}
}
.font {
#font > .serif();
}
/*
Deferred calls.
*/
.gradientBar(@primaryColor, @secondaryColor) {
#gradient > .vertical(@primaryColor, @secondaryColor);
}
#gradient {
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
}
}
.deferred {
.gradientBar(#555, #964);
}
/*
Mixins called within own scope
*/
.callswithinscope {
.inner() {
.call(@index: 3px) {
padding: @index;
}
.call(6px);
}
}
span.callswithinscope {
.callswithinscope > .inner();
}
|
