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

一尘不染

如何在更少的循环中生成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%;
}

阅读 233

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