CSS 预处理器中的循环
如果你看过老的科幻电影，你一定知道循环的强大之处。给你的机器人克星设置无限循环，它就会爆炸，然后机器人灰飞烟灭了。
预处理器的循环并不会在太空中发生剧烈爆炸（我希望），但是它有利于书写 DRY CSS（译者注：详细介绍可以参考这篇文章 http://vanseodesign.com/css/dry-principles/）。每个人在讨论模式库以及模块化设计的时候，大部分人的关注点是 CSS 选择器。无论你使用哪种模式的选择器（BEM、OOCSS、SMACSS 等等），循环可以使设计模式易读并且可维护，直接编译到代码中。
我们先看一看循环能做什么，以及在主流的 CSS 预处理器（Sass， Less，Stylus ）中如何使用。每一种语言都有特殊的语法，但是最终的效果是相同的。有多种方式制作 一只循环走动的猫
See the Pen Walkcycle with music loop by Rachel Nabors (@rachelnabors) on CodePen.
(animation by Rachel Nabors)
PostCSS 也很流行，但是本身并没有语法。它被称为后处理器，我喜欢称它为 meta-preprocessor。PostCSS 允许书写并分享你自己的预处理器语法。如果你愿意，你可以在 PostCSS 中重写 Sass 或者 Less，但是 已经有人在你之前这样做了。
循环条件
星际迷航并非完全虚构。如果你不小心，无限循环可能会使编译器变得卡顿或者毁坏编译器。虽然这不是一个消灭邪恶机器人好办法，但是它会惹恼使用你代码的人。所以循环的使用是有限度的——通常是由一些递增的循环体或者对象集合定义。
在编程术语中：
- While 循环是通用的，循环一直运行直到满足条件。请小心！这里容易出现无限循环。
- For 循环是递增的，运行特定数量的循环体。
- For-Each 循环遍历集合或者列表，每次循环一项。
上述循环的使用范围依次递减。for-each 循环是 for 循环的一种形式， 它们也是 while 循环的一种形式。但是大多数的使用场景可能需要更具体的分类。我很难在实际工作中找到 while 循环——大多数例子使用 for 或者 for-each 处理的更好。所以 Stylus 只提供了后者的语法。Sass 的语法则提供了这三种方法，而 Less 并没有循环语法——但这并不会妨碍我们！开始吧。
遍历集合的 for-each 循环
当有一个项目集合（列表或者数组）的时候，预处理器的循环是非常有用的——比如一组社交媒体图标和颜色，或者一列状态修饰符（success, warning, error, 等）。因为 for-each 循环本身就是处理项目集合，它是最可靠并最容易理解的循环。
我们通过循环一个简单的颜色列表来看看它是如何工作的。
在 Sass 中，我们将使用 @each 指令（@each $item in $list）来获取颜色：
See the Pen Sass ForEach List by Miriam Suzanne (@mirisuzanne) on CodePen.
在 Stylus 中，使用 for 语法（for item in list）处理集合：
See the Pen Stylus ForEach List by Miriam Suzanne (@mirisuzanne) on CodePen.
Less并没有提供循环的语法，但是我们可以使用 recursion （递归）来替代。递归就是调用自身的函数或者 mixin 。在 Less 中，我们使用 mixins 实现递归：
.recursion() {
/* an infinite recursive loop! */
.recursion();
}
现在我们将向 mixins 中添加 when 关键字，保证循环可以停止。
.recursion() when (@conditions) {
/* a conditional recursive "while" loop! */
.recursion();
}
我们可以这样创建 for 循环，添加一个从 1 开始的计数器（@i），然后依次递增（@i + 1），直到满足条件结束（@i <= length(@list)），其中 length(@list) 表示项目集合的总数。如果每一次循环提取下一个列表项，我们将手动创建 for-each 循环：
See the Pen Less ForEach List by Miriam Suzanne (@mirisuzanne) on CodePen.
在 Less 中，你做每件事都会遇到困难（原文评论中有很多人提出了反对意见）。这是它的特点。
社交媒体按钮
遍历列表很有用，但是很多时候你想遍历对象。一个普通的例子就是给社交媒体按钮添加不同的颜色和图标。对于列表中的每一项，我们需要社交网络的名称以及品牌颜色。
$social: (
'facebook': #3b5999,
'twitter': #55acee,
'linkedin': #0077B5,
'google': #dd4b39,
);
如果使用 Sass，我们可以使用语法 @each $key, $value in $array 来获取 key 值（网站名称）和 value 值（品牌颜色）。以下是全部的循环：
See the Pen Sass Social Media Loop by Miriam Suzanne (@mirisuzanne) on CodePen.
Stylus 有相同的语法：for key, value in array
See the Pen Stylus Social Media Loop by Miriam Suzanne (@mirisuzanne) on CodePen.
在 Less 中，我们必须手动提取每一对：
See the Pen LESS Social Media Loop by Miriam Suzanne (@mirisuzanne) on CodePen.
递增的 for 循环
For 循环可以运行任意数量的循环体，并不局限于对象的长度。你可能会使用它创建一个栅格系统（for columns from 1 through 12），遍历色轮（for hue from 1 through 360）或者使用 nth-child 给 div 编号并生成内容。
下面我们遍历 36 个 div 元素，使用 :nth-child 给每一项添加编号及背景色。
Sass 提供了一个特殊的 for 循环语法：@for $count from $start through $finish，其中 $start 和 $finish 都是整数。如果初始值比较大，Sass 会递减而不是递增。
See the Pen Sass "for" loop by Miriam Suzanne (@mirisuzanne) on CodePen.
through 关键字表示循环包含数字 36 。你也可以使用 to 关键字，它不包含最后一个元素，只会循环 35 次：@for $i from 1 to 36 。
Stylus 也有同样的递增的语法，但是 to 和 through 需要替换成 ... and .. ：
See the Pen Stylus "for" loop by Miriam Suzanne (@mirisuzanne) on CodePen.
Stylus 也提供了一个 range() 函数，可以改变递增的步数。使用 for hue in range(0, 360, 10) 可以每次以 10 的倍数递增。
Less 需要使用递归 mixins 。我们可以创建一个迭代数的参数（@i），使用 when (@i > 0) 条件结束循环，每次迭代减一，这样看上去像是递减的 for 循环。
See the Pen Less "for" loop by Miriam Suzanne (@mirisuzanne) on CodePen.
值得注意的是 CSS 也可以实现 nth-child– 编号，不需要预处理器。然而 CSS 并没有循环结构，它提供了一个 counter() 方法，根据 DOM 的数量递增，可以用于生成内容。然而在 content 属性之外使用是无效的，所以背景色并没有变化。
See the Pen CSS counter by Miriam Suzanne (@mirisuzanne) on CodePen.
栅格系统
我通常在抽象的 Sass 工具包中使用递增循环，几乎不在具体的样式表中使用。其中一个例外是生成带编号的选择器，可以是 nth-child （像我们上面做的一样），也可以是自动生成的类名（通常用在栅格系统中）。我们将创建一个简单的不带间距的响应式栅格系统。
See the Pen Sass For-Loop Grids by Miriam Suzanne (@mirisuzanne) on CodePen.
每个栅格都是百分比，使用 span / context * 100% 计算——所有栅格系统使用的基本计算方法。以下是 Stylus 和 Less 的语法：
See the Pen Stylus For-Loop Grids by Miriam Suzanne (@mirisuzanne) on CodePen.
See the Pen LESS For-Loop Grids by Miriam Suzanne (@mirisuzanne) on CodePen.
特殊的头像
在 OddBird 上，我们设计了一个生成用户默认头像的程序——但是希望默认图尽可能与众不同。最后，我们只设计了 9 个独特的图标，使用循环生成 1296 个不同的头像，所以大部分用户不会看到重复的头像。
每个头像有 5 个属性：
<svg class="avatar" data-dark="1" data-light="2" data-reverse="true" data-rotation="3">
<use xlink:href="#icon-avatar-1" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
- 初始图标形状（9 个选项）
- 可以选装
0,90,180, 或者270度（4 个选项） - 深色填充色（6 个选项）
- 浅色背景色（6 个选项）
- 可以反相颜色的
true/false属性（2 个选项）
代码中有 6 个颜色，3 个循环：
@for $i from 0 through定义四个旋转角度@for $i from 1 through length($colors)可以循环颜色集合（$colors），给每个颜色赋值（$i）。通常我会使用@each循环遍历颜色集合，但是如果每一项需要一个数值的时候，使用@for更简单。- 嵌套的
@each $reverse in (true, false)可以让我们选择是否将每个颜色组合的前景色和背景色反转。
以下是使用 Sass 编写的最终结果：
See the Pen 1296 avatars using multiple loops by Miriam Suzanne (@mirisuzanne) on CodePen.
你可以在课后把它转成 Less 和 Stylus 的代码。我已经看腻了。
特殊的 while 循环
真正的 while 循环很少见，但是我偶尔会使用。当我看一条路径指向何处时会非常有用。我并不想遍历整个集合或者特定数量的迭代——我想在找到需要的元素时就停止循环。我通常在抽象的工具包中使用，而在日常编写样式表时并不需要。
我使用 Sass 创建了一个帮助我储存及控制颜色的工具包。使用变量存储颜色可能是任何预处理器最普通的使用场景。大多数人会这样做：
$pink: #E2127A;
$brand-primary: $pink;
$site-background: $brand-primary;
我知道 pink 可能不是你网站的唯一色，但是现在用一个就够了。我使用了多个变量名，因为有利于创建抽象的图层——从基本色（pink）到更宽泛的模式（brand-primary）以及具体的使用场景（site-background）。我还想把单色列表转换成预处理器可以编译的调色板。我需要一种方法保证所有数值是相关联的并且是一种模式。我使用的方法是在单独的 Sass map 中，以键值对的形式存储主题颜色。
$colors: (
'pink': #E2127A,
'brand-primary': 'pink',
'site-background': 'brand-primary',
);
为什么要多此一举？我这样做是因为我可以使用一个单独的变量指定样式生成器，并且自动创建实时更新的调色盘。但是这是一把双刃剑，并不适合任何人。map 不允许我像使用变量一样给直接给键值对赋值。为了找到每个颜色的 value 值，我需要使用 while 循环检索 key 值。
See the Pen Sass "while" loop by Miriam Suzanne (@mirisuzanne) on CodePen.
我经常这样做，但是如果你在我的代码中搜索 Sass 的 @while， 你是找不到的。
See the Pen Sass "while" recursive function by Miriam Suzanne (@mirisuzanne) on CodePen.
现在我们可以在代码的任何地方调用 color() 函数。
Stylus 没有 while 循环的语法，但是可以使用数组变量和递归函数：
See the Pen Stylus "while" loop by Miriam Suzanne (@mirisuzanne) on CodePen.
Less 没有内置的数组变量，但是我们可以创建键值对模仿同样的效果，和社交媒体颜色的做法一样：
@colors:
'pink' #E2127A,
'brand-primary' 'pink',
'site-background' 'brand-primary'
;
我们将创建 @array-get mixin ，使用 key 值从数组中检索 value 值，然后创建递归的 while 循环来跟随路径：
See the Pen Less "while" list loop by Miriam Suzanne (@mirisuzanne) on CodePen.
作为示例可以运行，但是在 Less 中还有更好的方法，你可以不使用别名和命名变量构成的数组（不像 Sass 或者 Stylus）：
See the Pen Less name-spaced variables by Miriam Suzanne (@mirisuzanne) on CodePen.
既然颜色在一个变量中可行，我可以使用循环生成调色板。以下是使用 Sass 做的例子：
See the Pen Sass color palette by Miriam Suzanne (@mirisuzanne) on CodePen.
我相信你可以比我做的更漂亮。
Getting Loopy!
如果你不知道该什么时候使用循环，时刻留意循环体。你是不是有大量遵循相同模式的选择器，或者重复的计算？下面告诉你如何判断哪个循环是最好的：
- 如果你可以列出并命名循环中的项目，使用
for-each遍历。 - 如果循环的次数比循环体本身重要，或者如果你需要给每一项编号，请使用
for循环。 - 如果您需要访问同一个循环，只是输入值不同，尝试递归函数。
- 对于其它情况（几乎从来没有），使用
while循环。 - 如果你使用 Less… 祝你好运！
尽情的享受循环吧！
最新文章
- kvm/qemu/libvirt学习笔记 (1) qemu/kvm/libvirt介绍及虚拟化环境的安装
- 日期格式转换 java 2016-09-03T00:00:00.000+08:00
- webform 图片验证码制作
- 【java】企业级分布式搜索平台Solr视频教程
- Qt 学习笔记 TreeWidget 增删改
- js007-函数表达式
- javaWeb中servlet开发(3)——Servlet生命周期
- 蓝牙—RFCOMM协议
- javamail实现邮箱验证功能
- thinkphp 模板显示display和assign的用法
- 修改phpstorm的字体样式和大小
- DNS服务器解析域名的过程
- 斐讯 天天牛绑定教程 邀请码：8vozbf
- Celery的Web监控管理--Flower
- Vue学习四：v-if及v-show指令使用方法
- Linux命令之shutdown
- tornado项目注意点
- myeclipse2014 没有maven dependencies
- 小K（wifi）插座剖解
- easyui-从数据库读取创建无极菜单