class - LESS中的动态类名称

Question

我有以下一点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)

但是我不知道这是否可能。

Answer 1

我认为你离我们还很遥远。我要做的是在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。

值得一提的是，这将以与您在问题中指定它们的方式相反的顺序创建类。