小编典典

如何在更少的循环中生成CSS

css

我不熟悉Less。以我的理解,我认为Less可以将less格式文件转换为标准css文件(如果我错了,请更正我)。现在我在下面有一个问题。

假设您将在一个CSS文件中生成100个CSS类,如下所示(从.span1.span100)。我想知道是否less可以生成一个CSS文件吗?

...
.span5 {
  width: 5%;
}

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}

阅读 255

收藏
2020-05-16

共1个答案

小编典典

所有,我找到了一种循环输出css的方法。请复习一下。谢谢。

@iterations: 100;

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) {

    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~".span@{index}") {
        // your resulting css
        width: percentage((@index - 1) *0.01);
    }

    // next iteration
    .loopingClass(@index - 1);
}

// end the loop when index is 0
.loopingClass (0) {}

// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);
2020-05-16