SASS 中的 @each 循环用法详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，CSS 的编写及维护一直是一个比较麻烦的问题。而 Sass 正好可以帮助我们把这个问题变得更加轻松。Sass 的 @each 循环是其中一个非常有用的功能，今天我们来详细了解一下它的使用。

什么是 @each 循环？

@each 循环是 Sass 中用来进行循环操作的一种方法，它可以方便的遍历一个列表。使用 @each 循环可以简化我们重复书写相同代码的工作，同时还可以提高代码的可维护性。

@each 循环的语法

@each 循环的语法基本上分为两部分。首先，我们需要定义一个变量来存储每次遍历的值，然后在循环内部就可以使用这个变量了。

@each $variable in <list or map> {
    // code to execute for each item in the list or map
}

其中，$variable 是我们定义的遍历变量，可以根据自己的需要进行命名；<list> 部分则是我们要遍历的列表或者映射。

这里我们简单介绍一下列表和映射两种遍历方式。

遍历列表

遍历一个列表非常容易，我们只需要使用 @each 声明一个变量，然后将要遍历的列表传入即可。

$colors: red, green, blue;
@each $color in $colors {
    .#{$color} {
        color: $color;
    }
}

在这个例子中，我们定义了一个名为 $colors 的列表，里面有三个颜色值。然后我们使用 @each 循环，将 $colors 列表内的每一个元素都遍历一遍。对于每个元素，我们都输出一个类名，然后以该元素的值作为颜色值为这个类添加样式。

这样，我们就可以快速地定义出一堆类，每个类的颜色值都和列表内的相对应。

遍历映射

遍历一个映射和遍历列表类似，只不过我们需要使用 map-get 函数来获取映射中的键和值。

// www.javascriptcn.com code example
$colors: (
    "red": #ff0000,
    "green": #00ff00,
    "blue": #0000ff
);
@each $name, $color in $colors {
    .#{$name} {
        color: $color;
    }
}

在这个例子中，我们定义了一个名为 $colors 的映射，里面有三组键值对。然后我们使用 @each 循环，将 $colors 映射内的每一个元素都遍历一遍。对于每组元素，我们都输出一个类名，然后将该元素的键作为类名，将该元素的值作为颜色值为这个类添加样式。

这样，我们就可以快速地定义出一组类，每个类的名称都和映射中的键相对应，颜色值则和映射中的值相对应。

@each 循环的应用场景

使用 @each 循环的场景还是比较多的，下面我们介绍一下其中一些常见的应用场景。

自动生成类名

在前端开发中，我们经常需要定义大量的类名，这时候使用 @each 循环就可以方便地自动生成一组类名。

$icons: home, user, settings;
@each $icon in $icons {
    .icon-#{$icon} {
        background-image: url('/assets/icons/#{$icon}.svg');
    }
}

在这个例子中，我们定义了一个名为 $icons 的列表，里面有三个图标的名称。然后我们使用 @each 循环，将 $icons 列表内的每一个元素都遍历一遍。对于每个元素，我们都输出一个类名，然后将该元素作为图标名称为该类添加样式。

这样，我们就可以快速地定义出一堆带有不同图标的类，而不需要每次都手工定义。

生成响应式样式

在响应式设计中，我们通常需要根据不同的设备宽度设置不同的样式，这个时候配合 @each 循环可以很方便地生成响应式样式。

// www.javascriptcn.com code example
$breakpoints: (
    "small": 480px,
    "medium": 768px,
    "large": 1024px
);
@each $name, $width in $breakpoints {
    @media (min-width: $width) {
        .#{$name}-container {
            width: 100%;
            max-width: $width;
        }
    }
}

在这个例子中，我们定义了一个名为 $breakpoints 的映射，里面有三组键值对，分别表示不同的设备宽度。然后我们使用 @each 循环，将 $breakpoints 映射内的每一个元素都遍历一遍。对于每组元素，我们都输出一个媒体查询，然后以该元素的键作为前缀为包裹在媒体查询内的类添加样式。

这样，我们就可以快速地定义出一组响应式的样式，每个样式都以对应设备宽度的前缀开头，方便我们进行管理。

小结

本文简单介绍了 Sass 中 @each 循环的用法和应用场景，这个功能在日常开发中可以帮我们节省不少时间和精力。希望大家可以将这个技巧纳入到自己的工具箱中，让前端开发变得更加高效。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7d1a9a941bf7134dfe70f

SASS 中的 @each 循环用法详解