我有以下LESS代码工作
@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
等等等
基本上就是这样 。(@ index) - (920px减去@index)
但我不知道这是否可能。
答案 0 :(得分:8)
我认为你离我很远。我所做的是在mixin中创建第二个变量,称为@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即可。
值得注意的是,目前,这将按照您在问题中指定它们的相反顺序创建类。
答案 1 :(得分:8)
这整个问题对我很有帮助。我只是想将解决方案发布到我的问题中,因为自LESS v 1.4
以来它已经改变了。 LESS Changelog
您只需写出您想要的名称部分以及围绕它的~
和变量名称@
,而不是使用{}
符号。所以:#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;
}
...