预处理器循环不会在空间中引起剧烈的爆炸（我希望），但它们对于编写DRY CSS非常有用。 尽管大家都在谈论的样式库和模块化设计，大部分重点一直在CSS选择器这上面。 不管你选择什么样的缩写方式（BEM，OOCSS，SMACSS，ETC），循环可以帮助保持你的样式更具可读性和可维护性，直接加工到你的代码中。
我们将看看循环可以做什么，以及如何在主要的CSS预处理器中使用它们：Sass，Less和Stylus。 每种语言都提供了一种独特的语法，但他们都完成了工作。 有不止一种方法来循环一只猫。
猫
PostCSS也很受欢迎，但它不提供它自己的任何语法。 虽然它有时被称为后处理器，我称之为元预处理器。 PostCSS允许您编写和共享自己的预处理器语法。 如果你想，你可以重写Sass或Less在PostCSS，但有人已经先行一步了。
循环条件
星际迷航中的循环没有完全错误。 如果你不小心，无限循环可能会减慢或让你的编译器崩溃。 虽然这不是一个来解决邪恶的机器人很好的方法，它会惹恼任何使用你代码的人。 这就是为什么循环应该总是提供有限的目的 - 通常由多个增量重复或对象集合定义。
在编程术语中：
- while循环是通用的，并且在满足任何条件时将保持循环。 小心！ 这是无限循环最可能的地方。
- For循环是增量式的，对于特定数量的重复运行。
- For-Each循环遍历集合或列表，一次一个地遍历每个项目。
Each type of loop is more narrowly focussed than the previous. A for-each loop is just one type of for loop, which is one type of while loop. But most of your use-cases will fall into the more specific categories. I had trouble finding true while loops in the wild — most examples could have been handled better with for or for-each. That's probably why Stylus only provides syntax for the latter. Sass provides unique syntax for all three, and Less doesn't technically have looping syntax at all — but that won't stop us! Let's dive in.
for-each循环
预处理器循环在您有要循环的项目（列表或数组）（如社交媒体图标和颜色数组）或状态修饰符列表（success，warning，error等）时最有用。 因为for-each循环被绑定到已知的项目集合，它们往往是最具体和可理解的循环。
让我们从循环一个简单的颜色列表开始，看看它是如何工作的。
在Sass中，我们将使用@each指令（@each $item in $list）来获取颜色：
<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>
scss:
// styles
body {
display: flex;
}
div {
flex: 1 1 auto;
height: 100vh;
}
背景颜色循环
在Stylus中，语法（for item in list）处理集合：
HTML:
<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>
Stylus
HTML Stylus Result
EDIT ON
// colors
colors = 'darkslateblue' 'mediumorchid' 'seagreen' 'steelblue'
// loop!
for color in colors
{'.' + color}
background: unquote(color)
// styles
body {
display: flex;
}
div {
flex: 1 1 auto;
height: 100vh;
}
VIEW COMPILED RERUN
Less不提供循环语法，但我们可以使用递归来模拟它。 递归是当从内部调用函数或mixin中发生的。 在Less中，我们可以使用mixins进行递归：
.recursion() {
/* an infinite recursive loop! */
.recursion();
}
现在我们添加一个guard到mixin，以防止它无限循环。
.recursion() when (@conditions) {
/* a conditional recursive "while" loop! */
.recursion();
}
只要满足条件（@i <= length（@list）），我们就可以通过添加一个从1开始的计数器（@i） - 其中length（@list）将我们的循环迭代限制为与我们的集合相同的长度。 如果我们在每次传递中提取下一个列表项，我们将有一个手动的for-each循环：
<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>
// colors
@colors: darkslateblue mediumorchid seagreen steelblue;
// loop definition
.backgrounds(@list, @i: 1) when (@i <= length(@list)) {
// extract the right color from the list
@color: extract(@list, @i);
// apply the background to the selector
.@{color} {
background: @color;
}
// recursive call for the next color
.backgrounds(@list, @i + 1);
}
// application
.backgrounds(@colors);
// styles
body {
display: flex;
}
div {
flex: 1 1 auto;
height: 100vh;
}
在Less中实现这一切是很困难的一种方式。它颐神养性。
社交媒体按钮
循环遍历列表可能很有用，但更多时候你想循环遍历对象。 一个常见的例子是为社交媒体按钮分配不同的颜色和图标。 对于列表中的每个项目，我们需要网站的名称和该社交网络的品牌颜色：
SCSS：
$social: (
'facebook': #3b5999,
'twitter': #55acee,
'linkedin': #0077B5,
'google': #dd4b39,
);
使用Sass，我们可以使用语法@each $ key，$value in $array访问每个对的键（网络名称）和值（品牌颜色）。 这是完整的循环：
HTML SCSS Result
EDIT ON
<ul class="social">
<li>
<a href="http://www.facebook.com/me/">
Facebook
</a>
</li>
<li>
<a href="http://www.twitter.com/me/">
Twitter
</a>
</li>
<li>
<a href="http://www.linkedin.com/me/">
LinkedIn
</a>
</li>
<li>
<a href="http://plus.google.com/me/">
Google+
</a>
</li>
</ul>
SCSS
// establish social media colors
$social: (
'facebook': #3b5999,
'twitter': #55acee,
'linkedin': #0077B5,
'google': #dd4b39,
);
// loop, to style social media links
@each $name, $color in $social {
// selector based on href name
[href*='#{$name}'] {
background: $color;
&::before {
content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/#{$name}.png);
}
}
}
// styles
ul {
margin: 0 auto;
max-width: 30rem;
}
a {
border: 4px solid black;
border-radius: 6px;
color: black;
display: block;
font-weight: bold;
margin: 0.25rem;
padding: 0.5rem;
text-decoration: none;
&::before {
display: inline-block;
vertical-align: middle;
margin: 0 0.5em;
}
}
Stylus 也有同样的语法：for key, value in array
<ul class="social">
<li><a href="http://www.facebook.com/me/">Facebook</a></li>
<li><a href="http://www.twitter.com/me/">Twitter</a></li>
<li><a href="http://www.linkedin.com/me/">LinkedIn</a></li>
<li><a href="http://plus.google.com/me/">Google+</a></li>
</ul>
Stylus:
// establish social media color
ssocial = {
'facebook': #3b5999,
'twitter': #55acee,
'linkedin': #0077B5,
'google': #dd4b39,
}
// loop, to style social media links
for name, color in social
// selector based on href name
[href*={name}]
background: color
&::before
content: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/' + name + '.png')
// styles
ul {
margin: 0 auto;
max-width: 30rem;
}
a {
border: 4px solid black;
border-radius: 6px;
color: black;
display: block;
font-weight: bold;margin: 0.25rem;
padding: 0.5rem;
text-decoration: none;
&::before {
display: inline-block;
vertical-align: middle;
margin: 0 0.5em;
}
}
在Less中，我们必须手动提取对的每一边：
网友评论