预处理器

预处理器循环不会在空间中引起剧烈的爆炸(我希望),但它们对于编写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循环

预处理器循环在您有要循环的项目(列表或数组)(如社交媒体图标和颜色数组)或状态修饰符列表(successwarningerror等)时最有用。 因为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();
}

现在我们添加一个guardmixin,以防止它无限循环。

.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中,我们必须手动提取对的每一边:

推荐阅读更多精彩内容