CSS 如何在less中生成带有循环的CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15239785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to generate CSS with loop in less
提问by Joe.wang
I am not familiar with Less. In my understanding, I think Lesscan transform the lessformat file to standard cssfile(if I am wrong, please correct me). Now I have a question below.
我不熟悉Less。根据我的理解，我认为Less可以将less格式文件转换为标准css文件（如果我错了，请纠正我）。现在我有一个问题。
Say you would generate 100 CSS classes like below(from .span1to .span100) in a single CSS file. I want to know whether lesscan generate a CSS file like it?
假设您将在单个 CSS 文件中生成 100 个如下所示的 CSS 类（从.span1到.span100）。我想知道是否less可以生成一个类似的CSS文件？
...
.span5 {
width: 5%;
}
.span4 {
width: 4%;
}
.span3 {
width: 3%;
}
.span2 {
width: 2%;
}
.span1 {
width: 1%;
}
采纳答案by Joe.wang
All, I found a way to output css in loop. pleae review it .thanks.
所有，我找到了一种在循环中输出 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);
回答by AJ Meyghani
Try this:
尝试这个：
@iterations: 5;
.span-loop (@i) when (@i > 0) {
.span-@{i} {
width: ~"@{i}%";
}
.span-loop(@i - 1);
}
.span-loop (@iterations);
Output:
输出：
.span-5 {
width: 5%;
}
.span-4 {
width: 4%;
}
.span-3 {
width: 3%;
}
.span-2 {
width: 2%;
}
.span-1 {
width: 1%;
}
You can try it out on less2css.
Edit April 3, 2014
编辑 2014 年 4 月 3 日
Here is a more flexible version with more options:
这是一个更灵活的版本，有更多的选择：
.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);
}
You can call this by only @nwhich is the required argument:
您只能通过@n这是必需的参数来调用它：
.custom-loop(@n:3);
Which will output:
这将输出：
.span-1 {
width: 3px;
}
.span-2 {
width: 4px;
}
.span-3 {
width: 5px;
}
But if you want to have control over each parameter, here is an example using all custom parameters:
但是如果你想控制每个参数，这里是一个使用所有自定义参数的例子：
.custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);
This will output:
这将输出：
.fs-1 {
font-size: 1%;
}
.fs-2 {
font-size: 3%;
}
.fs-3 {
font-size: 5%;
}
Parameter descriptions
参数说明
@n: integer, The number of iterations.
@base-value(optional): integer, The starting value for the loop to be assigned to the property. Default value is the same is the value assigned for the number of iterations
@n.@unit(optional): string, The unit for the property. Default value is
px.@property(optional): non-stringor stringThe CSS property. Default value is
width@selector(optional): escaped string, The selector used for the loop. Could be anything as long as it is passed in as a escaped string.
@step-size(optional): integer, The value by which the loop increments by.
@n: integer，迭代次数。
@base-value（可选）：integer，要分配给属性的循环的起始值。默认值与为迭代次数分配的值相同
@n。@unit(可选): string，属性的单位。默认值为
px。@property（可选）：非字符串或字符串CSS 属性。默认值为
width@selector（可选）：转义字符串，用于循环的选择器。只要它作为转义字符串传入，就可以是任何东西。
@step-size(可选): integer, 循环增量的值。
NOTES
笔记
Note 1:The custom selector is passed in as a escaped string. If it is not escaped, it is not going to work as expected.
注 1：自定义选择器作为转义字符串传入。如果它没有被转义，它就不会按预期工作。
Note 2:The mixin is called by explicitly using the parameter name. This has some advantages and disadvantages:
注 2：通过显式使用参数名称来调用 mixin。这有一些优点和缺点：
Note 3:The unit is passed in as a string.
注 3：单位作为字符串传入。
Advantages
好处
- It is clear what parameter is called
- You don't have to rely on the order of parameters and remember which parameter comes first, second, …
- 叫什么参数就清楚了
- 您不必依赖参数的顺序并记住哪个参数是第一个、第二个……
Disadvantages
缺点
- I guess it looks a bit ugly ?
- (add to the list and/or change the implementation if you know a better one)
- 我猜它看起来有点丑？
- （如果您知道更好的实现，则添加到列表中和/或更改实现）
回答by FlamesoFF
It is impossible to do within given methods.
在给定的方法中是不可能做到的。
But possible like this:
但可能像这样：
.loopingClass (@index) when (@index > 0){
.span_@{index}{
width: @index px;
}
.loopingClass(@index - 1);
}
.loopingClass(5);
Resilt will be like this:
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.
