I'm working on converting Unsemantic from SASS to LESS and while I'm building the loop to create my classes:
.populateGridClasses (@index, @interval) when (@index > 0) {
@num: @index * @interval;
(~".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}") {
.grid();
}
.populateGridClasses(@index - 1, @interval);
}
.populateGridClasses (0, @interval) {}
// Create the grids in an inverval of 5
.populateGridClasses(20, 5);
// Create the grids in thirds .populateGridClasses(3, 33);
It creates the classes as so:
.eh-grid-100, .eh-mobile-grid-100, .eh-tablet-grid-100 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
}
.eh-grid-95, .eh-mobile-grid-95, .eh-tablet-grid-95 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
}
...
Obviously, that could be condesnsed so that all 6 of those classes are defined at once. So my idea is to use the loop to create a giant string that I'll then add the .grid()
mixin to:
@test: "";
.populateGridClasses4 (@index, @interval) when (@index > 0) {
@num: @index * @interval;
@ntest: ".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
@test: "@{test}@{ntest}";
.populateGridClasses4(@index - 1, @interval);
}
.populateGridClasses4 (0, @interval) {}
.populateGridClasses4(20, 5);
("@{test}"){
padding-left: 1px;
}
But that gives me a LESS error LESS: Out of stack space
. Any idea on how I can create this massive string so I can create 69 classes and only define them once? Programmatically, of course.