如何生成与循环CSS少(How to generate CSS with loop in less)

我不熟悉的Less 。 在我的理解，我觉得Less可变换less格式文件到标准css文件（如果我错了，请指正）。 现在我有以下问题。

比如你会产生类似下面100 CSS类（从.span1到.span100在一个CSS文件）。 我想知道是否less能产生像它一个CSS文件？

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

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}

Answer 1:

试试这个，如果你使用的是最新版本的减：

@iterations: 5;
.span-loop (@i) when (@i > 0) {
    .span-@{i} {
        width: ~"@{i}%";
    }
    .span-loop(@i - 1);
}
.span-loop (@iterations);

输出：

.span-5 {
  width: 5%;
}
.span-4 {
  width: 4%;
}
.span-3 {
  width: 3%;
}
.span-2 {
  width: 2%;
}
.span-1 {
  width: 1%;
}

你可以尝试一下在less2css 。

编辑2014年4月3日

这里是一个更灵活的版本有更多的选择：

.custom-loop( @base-value:@n ; @n ; @unit : px; @j : 1 ;@_s:0 ; @step-size:1  ; @selector:~".span-"; @property : width)
when not(@n=0)  {

  @size : @base-value+@_s;
  @{selector}@{j}{
    @{property} : ~"@{size}@{unit}";
  }
  .custom-loop(@base-value ,  (@n - 1), @unit , (@j + 1) ,  (@_s+@step-size) , @step-size,  @selector, @property);
}

您可以通过只调用此@n这是必需的参数：

.custom-loop(@n:3);

这将输出：

.span-1 {
  width: 3px;
}
.span-2 {
  width: 4px;
}
.span-3 {
  width: 5px;
}

但是，如果你想拥有控制权的每个参数，这里全都是使用自定义参数的例子：

.custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);

这将输出：

.fs-1 {
  font-size: 1%;
}
.fs-2 {
  font-size: 3%;
}
.fs-3 {
  font-size: 5%;
}

参数说明

1. @n： 整数 ，迭代的次数。

2. @基值 （可选）： 整数 ，循环中的初始值将被分配给的属性。 默认值是相同的是分配用于迭代次数的值@n 。

3. @unit（可选）： 串 ，该属性的单元。 默认值是px 。

4. @属性 （可选）： 非字符串或字符串的CSS属性。 默认值是width

5. @selector（可选）： 转义字符串 ，用于循环的选择器。 只要它是通过在一个转义字符串可以是任何东西。

6. @步长 （可选）： 整数 ，该值通过将环路递增。

笔记

注1：自定义选择器传过来的转义字符串。 如果没有逃脱，它是不会按预期运行。

注2：混入是通过明确使用参数名字的。 这有一些优点和缺点：

注3：本机传过来的字符串。

好处

1. 很显然叫什么参数
2. 你不必依赖参数的顺序上，并记住它的参数是第一位的，第二，...

缺点

1. 我想这看起来有点丑吗？
2. （添加到列表中和/或改变实现，如果你知道一个更好的）

Answer 2:

好，我找到了一种方法来在回路输出的CSS。 pleae审查.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);

Answer 3:

这是不可能给出的方法内完成。

但是，可能是这样的：

.loopingClass (@index) when (@index > 0){
  .span_@{index}{
    width: @index px;
  }
  .loopingClass(@index - 1);
}
.loopingClass(5);

Resilt将是这样的：

.span_100 {
  width: 100 px;
}
.span_99 {
  width: 99 px;
}
.span_98 {
  width: 98 px;
}
.span_97 {
  width: 97 px;
}
.span_96 {
  width: 96 px;
}
.span_95 {
  width: 95 px;
}

and e.t.c.

文章来源: How to generate CSS with loop in less