44 lines
906 B
Plaintext
44 lines
906 B
Plaintext
/*
|
|
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); |