Question

我的css应如下所示：

&.classname {
     &.prog0 {.st_0;}
     &.prog10 {.st_10;}
     &.prog20 {.st_20;}
     &.prog30 {.st_30;}
     &.prog40 {.st_40;}
     &.prog50 {.st_50;}
     &.prog60 {.st_60;}
     &.prog70 {.st_70;}
     &.prog80 {.st_80;}
     &.prog90 {.st_90;}
     &.prog100 {.st_100;}
}

我知道你可以创建一个循环来添加属性，但是你也可以创建一个循环来调用一个函数吗？如果我输入它，我就不会编译：/

我尝试过像这样：

.generate(@n, @i: 0) when (@i =< @n) {
    &.prog@{i} {
        .st@{i});
    }
    .generate(@n, (@i + 10));
}

Answer 1

这是完整的循环：

.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);

在less循环中调用动态类名

1 个答案: