首页 > 代码库 > CSS 预处理器中的循环

CSS 预处理器中的循环

2024-09-16 00:57:05   218人阅读

    

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

(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）来获取颜色：

在 Stylus 中，使用 for 语法（for item in list）处理集合：

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 循环：

在 Less 中，你做每件事都会遇到困难（原文评论中有很多人提出了反对意见）。这是它的特点。

社交媒体按钮

遍历列表很有用，但是很多时候你想遍历对象。一个普通的例子就是给社交媒体按钮添加不同的颜色和图标。对于列表中的每一项，我们需要社交网络的名称以及品牌颜色。

技术分享

$social: (
  ‘facebook‘: #3b5999,
  ‘twitter‘: #55acee,
  ‘linkedin‘: #0077B5,
  ‘google‘: #dd4b39,
);

技术分享

如果使用 Sass，我们可以使用语法 @each $key, $value in $array 来获取 key 值（网站名称）和 value 值（品牌颜色）。以下是全部的循环：

Stylus 有相同的语法：for key, value in array

在 Less 中，我们必须手动提取每一对：

递增的 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 会递减而不是递增。

through 关键字表示循环包含数字 36 。你也可以使用 to 关键字，它不包含最后一个元素，只会循环35 次：@for $i from 1 to 36 。

Stylus 也有同样的递增的语法，但是 to 和 through 需要替换成 ... and .. ：

Stylus 也提供了一个 range() 函数，可以改变递增的步数。使用 for hue in range(0, 360, 10) 可以每次以 10 的倍数递增。

Less 需要使用递归 mixins 。我们可以创建一个迭代数的参数（@i），使用 when (@i > 0) 条件结束循环，每次迭代减一，这样看上去像是递减的 for 循环。

值得注意的是 CSS 也可以实现 nth-child– 编号，不需要预处理器。然而 CSS 并没有循环结构，它提供了一个 counter() 方法，根据 DOM 的数量递增，可以用于生成内容。然而在 content 属性之外使用是无效的，所以背景色并没有变化。

栅格系统

我通常在抽象的 Sass 工具包中使用递增循环，几乎不在具体的样式表中使用。其中一个例外是生成带编号的选择器，可以是 nth-child （像我们上面做的一样），也可以是自动生成的类名（通常用在栅格系统中）。我们将创建一个简单的不带间距的响应式栅格系统。

每个栅格都是百分比，使用 span / context * 100% 计算——所有栅格系统使用的基本计算方法。以下是 Stylus 和 Less 的语法：

特殊的头像

在 OddBird 上，我们设计了一个生成用户默认头像的程序——但是希望默认图尽可能与众不同。最后，我们只设计了 9 个独特的图标，使用循环生成 1296 个不同的头像，所以大部分用户不会看到重复的头像。

每个头像有 5 个属性：

<svg class="avatar" data-dark="1" data-light="2" data-reverse="true" data-rotation="3">
  <use xlink:href="http://www.mamicode.com/#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 编写的最终结果：

你可以在课后把它转成 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 值。

我经常这样做，但是如果你在我的代码中搜索 Sass 的 @while， 你是找不到的。

现在我们可以在代码的任何地方调用 color() 函数。

Stylus 没有 while 循环的语法，但是可以使用数组变量和递归函数：

Less 没有内置的数组变量，但是我们可以创建键值对模仿同样的效果，和社交媒体颜色的做法一样：

@colors:
  ‘pink‘ #E2127A,
  ‘brand-primary‘ ‘pink‘,
  ‘site-background‘ ‘brand-primary‘
;

我们将创建 @array-get mixin ，使用 key 值从数组中检索 value 值，然后创建递归的 while 循环来跟随路径：

作为示例可以运行，但是在 Less 中还有更好的方法，你可以不使用别名和命名变量构成的数组（不像 Sass 或者 Stylus）：

既然颜色在一个变量中可行，我可以使用循环生成调色板。以下是使用 Sass 做的例子：

我相信你可以比我做的更漂亮。

Getting Loopy!

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

  1. 如果你可以列出并命名循环中的项目，使用 for-each 遍历。

  2. 如果循环的次数比循环体本身重要，或者如果你需要给每一项编号，请使用 for 循环。

  3. 如果您需要访问同一个循环，只是输入值不同，尝试递归函数。

  4. 对于其它情况（几乎从来没有），使用 while 循环。

  5. 如果你使用 Less… 祝你好运！


CSS 预处理器中的循环


联系
我们