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
|
/*
Recursive mixin calls ala bootstrap
*/
.span (@columns) {
width: (12px * @columns) + (12px * (@columns - 1));
}
.spanX (@index) when (@index > 0) {
.span@{index} { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.a {
.spanX(12);
}
// Nested recursion
@gridColumns: 3;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
#grid {
.core (@gridColumnWidth, @gridGutterWidth) {
.spanX (@index) when (@index > 0) {
.span@{index} { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.span (@columns) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.spanX (@gridColumns);
.nested {
padding: 1px;
.spanX (@gridColumns);
.deep {
padding: 1px;
.spanX (@gridColumns);
}
}
}
}
#grid > .core(@gridColumnWidth, @gridGutterWidth);
|
