如何生成CSS与循环在较少 [英] How to generate CSS with loop in less

问题描述

我不熟悉少。在我的理解，我认为 Less 可以将减少格式文件转换为标准 css 文件（如果我错了，请纠正我）。

I am not familiar with Less. In my understanding, I think Less can transform the less format file to standard css file(if I am wrong, please correct me). Now I have a question below.

假设您将生成100个CSS类，如下所示（从 .span1 到 .span100 ）。我想知道 less 是否可以生成一个CSS文件？

Say you would generate 100 CSS classes like below(from .span1 to .span100) in a single CSS file. I want to know whether less can generate a CSS file like it?

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

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}

推荐答案

在循环中输出css。

All, I found a way to output css in loop. pleae review it .thanks.

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

这篇关于如何生成CSS与循环在较少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！