在LESS中循环中连接字符串 [英] Concatenate String in LESS in loop
问题描述
我正在将 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）{}
//以5的倒数创建网格
.populateGridClasses（20，5）;
//以三分格形式创建网格
.populateGridClasses（3，33） p>
它创建类如下：
.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-mobile-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：Out的堆栈空间。任何想法如何我可以创建这个海量字符串，所以我可以创建69类，只定义一次？以编程方式，当然。
你可以尝试传递另一个属性到mixin ...像这样，将@ t1编码为参数，并在循环中定义@ t2，并传递它。现在，你将只在一个循环步骤的范围内写入变量，而不是在递归中重写相同的变量（不同意）。所以这是你的代码，不应该得到你提到的错误：
@test：
.populateGridClasses4（@index，@interval，@ t1）when（@index> 0）{
@num：@index * @interval;
@ntest：.eh-grid - @ {num}，.eh-mobile-grid - @ {num}，.eh-tablet-grid - @ {num};
@ t2：〜@ {t1} @ {ntest};
.populateGridClasses4（@index - 1，@ interval，@ t2）;
}
.populateGridClasses4（0，@ interval，@ t1）{}
.populateGridClasses4（20，5，@test）;
@ {t2} {
padding-left：1px;
}
还需要使用〜来进行类插值，而不是返回类名
编辑：上面的只能在1.3.3中使用，但是对于你的工作在1.4，你需要调整它一点。另外我注意到，你加入字符串的方式没有在每个循环的类名称之间添加逗号，所以我在这里添加了另一个步骤，这应该现在做正确的事情in1.4和以前的版本的LESS。 .populateGridClasses4（1，@ num，@ t1）{
@test：〜@ {t1}，.eh-grid- @ {num}，.eh-mobile-grid - @ {num}，.eh-tablet-grid - @ {num};
}
.populateGridClasses4（@index，@interval，@ t1）when（@index> 1）{
@num：（@index * @interval）;
@ t2：@ {t1}，.eh-grid - @ {num}，.eh-mobile-grid - @ {num}，.eh-tablet-grid - @ {num}
.populateGridClasses4（（@ index - 1），@ interval，@ t2）;
}
.populateGridClasses4（@ index，@ interval）{
@num：（@index * @interval）;
@ t2：.eh-grid - @ {num}，.eh-mobile-grid - @ {num}，.eh-tablet-grid - @ {num};
.populateGridClasses4（（@ index - 1），@interval，@ t2）;
}
.populateGridClasses4（20，5）;
@ {test} {padding-left：1px; }
输出 CSS 是：
.eh-grid-100，.eh-mobile-grid-100，.eh-tablet-grid-100，.eh-grid-95，.eh移动网格-95，平板网格-95，网格-90，移动网格-90，平板网格-90，网格-85，... -mobile-grid-85，.eh-tablet-grid-85，.eg-grid-80，.eh- mobile-grid-80，.eh-tablet-grid-80，.hg-grid-75，.eh移动网格-75，平板网格-75，网格-70，移动网格-70，平板网格-70，网格-65，... -mobile-grid-65，e-tablet-grid-65，ee-grid-60，ee-mobile-grid-60，eh-tablet-grid-60，eh-grid-55， -mobile-grid-55，eh-tablet-grid-55，eh-grid-50，ee-mobile-grid-50，eh-tablet-grid-50，eh-grid-45， -mobile-grid-45，e-tablet-grid-45，ee-grid-40，eh-mobile-grid-40，eh-tablet-grid-40，eh-grid-35， -mobile-grid-35，ee-tablet-grid-35，ee-grid-30，ee-mobile-grid-30，eh-tablet-grid-30，eh-grid-25， - 移动网格-25，网格 - 网格-25，网格-20，移动 - 网格-20，网格 - 网格-20，网格-15，... - 移动网格-15，平板网格-15，网格-10，移动网格-10，平板网格-10，网格-5，... -mobile-grid-5，.eh-tablet-grid-5 {
padding-left：1px;
}
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.
You could try passing another attribute to the mixin ... like this, where I added to your code the @t1 to the arguments and define the @t2 in the loop, and pass it on. Now you'll be writing to a variable only in the scope of one loop step, and not trying to overwrite the same variable over again in the recursion (does not agree with less). So this is your code, that should not get the error you mention anymore:
@test: "";
.populateGridClasses4 (@index, @interval, @t1) when (@index > 0) {
@num: @index * @interval;
@ntest: ".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
@t2: ~"@{t1}@{ntest}";
.populateGridClasses4(@index - 1, @interval,@t2);
}
.populateGridClasses4 (0, @interval,@t1) {}
.populateGridClasses4(20, 5, @test);
@{t2} {
padding-left: 1px;
}
Also you need use ~ for class interpolation, not to return the class names between quotation marks.
Edit: The above will only work in 1.3.3, but for your approach to work in 1.4 you need to tweak it a little. Also I noticed that the way you were joining the strings did not add commas between class names of each loop, so I added another step here, this should now do the right thing in1.4 and previous versions of LESS.
.populateGridClasses4(1,@num,@t1) {
@test: ~"@{t1}, .eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
}
.populateGridClasses4(@index, @interval, @t1) when (@index > 1) {
@num: (@index * @interval);
@t2: "@{t1}, .eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
.populateGridClasses4((@index - 1),@interval,@t2);
}
.populateGridClasses4(@index,@interval) {
@num: (@index * @interval);
@t2: ".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
.populateGridClasses4((@index - 1), @interval, @t2);
}
.populateGridClasses4(20, 5);
@{test} { padding-left: 1px; }
the output CSS is:
.eh-grid-100, .eh-mobile-grid-100, .eh-tablet-grid-100, .eh-grid-95, .eh-mobile-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;
}
这篇关于在LESS中循环中连接字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
