我不太熟悉Less。在我的理解中，我认为Less可以将较少的格式文件转换为标准的css文件(如果我错了，请更正我)。现在我有一个问题在下面。
假设您将在单个CSS文件中生成100个CSS类，如下所示(从.span1到.span100)。我想知道是否能够生成像这样的CSS文件？
...
.span5 {
width: 5%;
}
.span4 {
width: 4%;
}
.span3 {
width: 3%;
}
.span2 {
width: 2%;
}
.span1 {
width: 1%;
}
解决方法
如果您使用最新版本的LESS，请尝试：
@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%;
}
编辑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%;
}
参数说明
> @n：integer，迭代次数。
> @ base-value(可选)：integer，要分配给该属性的循环的起始值。默认值是为迭代次数分配的值@n。
> @unit(可选)：string，属性的单位。默认值为px。
> @property(可选)：非字符串或字符串CSS属性。默认值为width
> @selector(可选)：转义字符串，用于循环的选择器。只要它作为转义的字符串传入，就可以是任何东西。
> @ step-size(可选)：integer，循环递增的值。
笔记
注1：自定义选择器作为转义字符串传入。如果没有逃脱，就不会像预期的那样工作。
注2：通过明确使用参数名称来调用mixin。这有一些优点和缺点：
注3：单位以字符串形式传入。
优点
清楚的是什么参数被调用
>您不必依赖于参数的顺序，并记住哪个参数来自第一，第二，…
缺点
>我想看起来有点丑陋吗？>(添加到列表和/或更改实现，如果你知道更好的一个)
