我有以下一点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)
但是我不知道这是否可能。
最佳答案
我认为你离我们还很遥远。我要做的是在mixin中创建第二个变量,称为@index2
。所有这些操作就是找到您要查找的'920px minus @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。值得一提的是,这将以与您在问题中指定它们的方式相反的顺序创建类。
关于class - LESS中的动态类名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10899497/