我有较少的代码如下位工作
@iterations: 940;
@iterations: 940;
@col:2.0833333333333333333333333333333%;
// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > -20) {
// create the actual css selector, example will result in
// .myclass_30, .myclass_28, .... , .myclass_1
(~".gs@{index}") {
// your resulting css
width: (@index/20+1)*@col;
}
// next iteration
.loopingClass(@index - 60);
}
// end the loop when index is 0
.loopingClass (-20) {}
// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);
它输出我们的电网系统，像这样：
.gs940 {
width: 100%;
}
.gs880 {
width: 93.75%;
}
.gs820 {
width: 87.5%;
}
.gs760 {
width: 81.25%;
}
.gs700 {
width: 75%;
}
等等，等等等等。
现在我想做的是一些数学的类名来得到下面的类
.gs220-700
.gs280-640
.gs340-580
.gs400-520
.gs460-460
.gs520-400
.gs580-340
.gs640-280
.gs700-220
等等，等等等等。
。基本上这将是（@指数） - （920px减@index）
但我不知道这是可能的。
我不认为你不远了。 我所做的就是创建混入内部的第二变量，叫@index2 。 所有这一切确实是发现你正在寻找的'920px减去@index的价值：
@index2 = (920-@index);
这则附加到的类名：
(~".gs@{index}-@{index2}") {
这是一个完整的循环：
.loopingClass (@index) when (@index > 160) {
@index2 = (920-@index);
// create the actual css selector, example will result in
// .myclass_30, .myclass_28, .... , .myclass_1
(~".gs@{index}-@{index2}") {
// your resulting css
width: (@index/20+1)*@col;
}
// next iteration
.loopingClass(@index - 60);
}
// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);
为了得到公正的一套，你正在寻找（gs220-700到gs700-220），只是改变@iterations等于700。
值得注意的是，目前，这会在你如何在问题中指定它们相反的顺序创建的类。
这整个问题是对我很有帮助。 我只是想解决张贴到我的问题，因为这样做的方式，因为已经改变了LESS v 1.4 。 LESS更新日志
而不是使用~标志，你只要写出来要连同普通的名字的部分@和变量名{}周围。 所以： #class@{variable} 。
例如，使用相同类型的循环我的解决方案变成了这样：
/*Total number of passport inserts*/
@numInserts: 5;
/*Total width of the passport foldouts*/
@passportWidth: 300px;
/*Change in passport insert width per iteration*/
@passportWidthDiff: (@passportWidth / @numInserts);
/*"Array" of colors to select from to apply to the id*/
@passportColors:
blue orange green red yellow
purple white teal violet indigo;
/*The faux loop the doesn't end up in the final css
@index is the counter
@numInserts is the total number of loops*/
.loopingClass (@index) when (@index <= @numInserts){
/*This is the created ID with the index appended to it
You can also do this with classes such as if
we had had ".insert@{index}"*/
#insert@{index}{
/*Here are our properties that get adjusted with the index*/
width: (@passportWidth - (@passportWidthDiff * (@numInserts - @index)));
height: 50px;
background-color: extract(@passportColors, @index);
z-index: (@numInserts - @index);
}
/*Here we increment our loop*/
.loopingClass(@index + 1);
}
/*This calls the loop and starts it, I started from 1
since I didn't want to lead a className starting from 0,
But there is no real reason not to. Just remember to
Change your conditional from "<=" to "<"*/
.loopingClass(1);
并产生如下：
#insert1 {
width: 60px;
height: 50px;
background-color: #0000ff;
z-index: 4;
}
#insert2 {
width: 120px;
height: 50px;
background-color: #ffa500;
z-index: 3;
}
#insert3 {
width: 180px;
height: 50px;
background-color: #008000;
z-index: 2;
}
...
