CSS 预处理器中的循环

本文由 叙帝利 翻译,黄利民 校稿。未经许可,禁止转载!

英文出处:Loops in CSS Preprocessors

发表地址:http://web.jobbole.com/91016/

如果你看过老的科幻电影,你一定知道循环的强大之处。给你的机器人克星设置无限循环,它就会爆炸,然后机器人灰飞烟灭了。

预处理器的循环并不会在太空中发生剧烈爆炸(我希望),但是它有利于书写 DRY CSS(译者注:详细介绍可以参考这篇文章 http://vanseodesign.com/css/dry-principles/)。每个人在讨论模式库以及模块化设计的时候,大部分人的关注点是 CSS 选择器。无论你使用哪种模式的选择器(BEM、OOCSS、SMACSS 等等),循环可以使设计模式易读并且可维护,直接编译到代码中。

我们先看一看循环能做什么,以及在主流的 CSS 预处理器(SassLessStylus )中如何使用。每一种语言都有特殊的语法,但是最终的效果是相同的。有多种方式制作 一只循环走动的猫

See the Pen Walkcycle with music loop by Rachel Nabors (@rachelnabors) on CodePen.

(animation by Rachel Nabors) 

PostCSS 也很流行,但是本身并没有语法。它被称为后处理器,我喜欢称它为 meta-preprocessor。PostCSS 允许书写并分享你自己的预处理器语法。如果你愿意,你可以在 PostCSS 中重写 Sass 或者 Less,但是 已经有人在你之前这样做了

循环条件

星际迷航并非完全虚构。如果你不小心,无限循环可能会使编译器变得卡顿或者毁坏编译器。虽然这不是一个消灭邪恶机器人好办法,但是它会惹恼使用你代码的人。所以循环的使用是有限度的——通常是由一些递增的循环体或者对象集合定义。

在编程术语中:

  1. While 循环是通用的,循环一直运行直到满足条件。请小心!这里容易出现无限循环。
  2. For 循环是递增的,运行特定数量的循环体。
  3. 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 也有同样的递增的语法,但是 tothrough 需要替换成 ... 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> 
  1. 初始图标形状(9 个选项)
  2. 可以选装 0, 90, 180, 或者 270 度(4 个选项)
  3. 深色填充色(6 个选项)
  4. 浅色背景色(6 个选项)
  5. 可以反相颜色的 true/false 属性(2 个选项)

代码中有 6 个颜色,3 个循环:

  1. @for $i from 0 through 定义四个旋转角度
  2. @for $i from 1 through length($colors) 可以循环颜色集合($colors),给每个颜色赋值($i)。通常我会使用 @each 循环遍历颜色集合,但是如果每一项需要一个数值的时候,使用 @for 更简单。
  3. 嵌套的 @each $reverse in (true, false)可以让我们选择是否将每个颜色组合的前景色和背景色反转。

以下是使用 Sass 编写的最终结果:

See the Pen 1296 avatars using multiple loops by Miriam Suzanne (@mirisuzanne) on CodePen.

你可以在课后把它转成 LessStylus 的代码。我已经看腻了。

特殊的 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!

如果你不知道该什么时候使用循环,时刻留意循环体。你是不是有大量遵循相同模式的选择器,或者重复的计算?下面告诉你如何判断哪个循环是最好的:

  1. 如果你可以列出并命名循环中的项目,使用 for-each 遍历。
  2. 如果循环的次数比循环体本身重要,或者如果你需要给每一项编号,请使用 for 循环。
  3. 如果您需要访问同一个循环,只是输入值不同,尝试递归函数。
  4. 对于其它情况(几乎从来没有),使用 while 循环。
  5. 如果你使用 Less… 祝你好运!

尽情的享受循环吧!

posted @ 2017-04-14 16:12  叙帝利  阅读(5832)  评论(0编辑  收藏  举报