我正在努力将
Unsemantic从SASS转换为LESS,而我正在构建循环以创建我的类：
.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);
//在三分之一处创建网格
.populateGridClasses(3,33);
它创建类如下：
.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;
}
...
显然,这可以被认可,以便同时定义所有这6个类.所以我的想法是使用循环创建一个巨大的字符串,然后我将.grid()mixin添加到：
@test: "";
.populateGridClasses4 (@index,@interval) when (@index > 0) {
@num: @index * @interval;
@ntest: ".eh-grid-@{num},.eh-tablet-grid-@{num}";
@test: "@{test}@{ntest}";
.populateGridClasses4(@index - 1,@interval);
}
.populateGridClasses4 (0,@interval) {}
.populateGridClasses4(20,5);
("@{test}"){
padding-left: 1px;
}
但这给了我一个LESS错误LESS：堆栈空间不足.关于如何创建这个庞大的字符串的任何想法,所以我可以创建69个类,只定义一次？当然是以编程方式.
解决方法
您可以尝试将另一个属性传递给mixin …就像这样,我在代码中将@ t1添加到参数中并在循环中定义@ t2,然后传递给它.现在,您将仅在一个循环步骤的范围内写入变量,而不是尝试在递归中再次覆盖相同的变量(不同意更少).所以这是你的代码,不应该得到你提到的错误：
@test: "";
.populateGridClasses4 (@index,@interval,@t1) when (@index > 0) {
@num: @index * @interval;
@ntest: ".eh-grid-@{num},.eh-tablet-grid-@{num}";
@t2: ~"@{t1}@{ntest}";
.populateGridClasses4(@index - 1,@t2);
}
.populateGridClasses4 (0,@t1) {}
.populateGridClasses4(20,5,@test);
@{t2} {
padding-left: 1px;
}
你还需要使用〜进行类插值,而不是在引号之间返回类名.
编辑：以上只适用于1.3.3,但是对于1.4的工作方法,你需要稍微调整一下.另外我注意到你加入字符串的方式没有在每个循环的类名之间添加逗号,所以我在这里添加了另一个步骤,现在应该在1.4和以前版本的LESS中做正确的事情.
.populateGridClasses4(1,@num,@t1) {
@test: ~"@{t1},.eh-grid-@{num},.eh-tablet-grid-@{num}";
}
.populateGridClasses4(@index,@t1) when (@index > 1) {
@num: (@index * @interval);
@t2: "@{t1},.eh-tablet-grid-@{num}";
.populateGridClasses4((@index - 1),@t2);
}
.populateGridClasses4(@index,@interval) {
@num: (@index * @interval);
@t2: ".eh-grid-@{num},.eh-tablet-grid-@{num}";
.populateGridClasses4((@index - 1),@t2);
}
.populateGridClasses4(20,5);
@{test} { padding-left: 1px; }
输出CSS是：
.eh-grid-100,.eh-tablet-grid-100,.eh-grid-95,.eh-tablet-grid-95,.eh-grid-90,.eh-mobile-grid-90,.eh-tablet-grid-90,.eh-grid-85,.eh-mobile-grid-85,.eh-tablet-grid-85,.eh-grid-80,.eh-mobile-grid-80,.eh-tablet-grid-80,.eh-grid-75,.eh-mobile-grid-75,.eh-tablet-grid-75,.eh-grid-70,.eh-mobile-grid-70,.eh-tablet-grid-70,.eh-grid-65,.eh-mobile-grid-65,.eh-tablet-grid-65,.eh-grid-60,.eh-mobile-grid-60,.eh-tablet-grid-60,.eh-grid-55,.eh-mobile-grid-55,.eh-tablet-grid-55,.eh-grid-50,.eh-mobile-grid-50,.eh-tablet-grid-50,.eh-grid-45,.eh-mobile-grid-45,.eh-tablet-grid-45,.eh-grid-40,.eh-mobile-grid-40,.eh-tablet-grid-40,.eh-grid-35,.eh-mobile-grid-35,.eh-tablet-grid-35,.eh-grid-30,.eh-mobile-grid-30,.eh-tablet-grid-30,.eh-grid-25,.eh-mobile-grid-25,.eh-tablet-grid-25,.eh-grid-20,.eh-mobile-grid-20,.eh-tablet-grid-20,.eh-grid-15,.eh-mobile-grid-15,.eh-tablet-grid-15,.eh-grid-10,.eh-mobile-grid-10,.eh-tablet-grid-10,.eh-grid-5,.eh-mobile-grid-5,.eh-tablet-grid-5 {
padding-left: 1px;
}
