CSS Sass 多变量的 @each

在本文中，我们将介绍如何在 Sass 中使用 @each 来处理多个变量。

阅读更多：CSS 教程

@each 概述

Sass 是一种预处理器，它扩展了 CSS 的功能，使得样式表更加灵活和易于维护。@each 是 Sass 提供的一个循环指令，用于迭代一个集合并对每个元素执行相同的操作。使用 @each，我们可以在 Sass 中处理多个变量，从而更高效地生成样式。

@each 语法

@each 语法如下：

@each 变量名 in集合 {
    // 循环操作
}

其中， $变量名是用于接收集合中的每个元素的变量，$ 集合是包含多个元素的列表，可以是一个列表、一个逗号分隔的值列表、或者 Map（键值对的集合）。

@each 示例

让我们通过几个示例来演示如何使用 @each 处理多个变量。

示例一：颜色列表

假设我们有一个颜色列表，要将每个颜色应用到一组元素上。我们可以使用 @each 来遍历颜色列表，并为每个元素设置对应的背景颜色。

$colors: red, blue, green, yellow;

@each $color in $colors {
  .box-#{$color} {
    background-color: $color;
  }
}

生成的 CSS 代码如下：

.box-red {
  background-color: red;
}

.box-blue {
  background-color: blue;
}

.box-green {
  background-color: green;
}

.box-yellow {
  background-color: yellow;
}

示例二：尺寸映射

假设我们有一个尺寸映射，要根据不同的屏幕尺寸设置每个元素的字体大小。我们可以使用 @each 来遍历尺寸映射，并为每个元素设置对应的字体大小。

$sizes: (
  small: 14px,
  medium: 16px,
  large: 18px
);

@each $name, $size in $sizes {
  .text-#{$name} {
    font-size: $size;
  }
}

生成的 CSS 代码如下：

.text-small {
  font-size: 14px;
}

.text-medium {
  font-size: 16px;
}

.text-large {
  font-size: 18px;
}

示例三：动态生成样式

假设我们有一组按钮样式，每个按钮都有不同的颜色和圆角半径。我们可以使用 @each 来遍历按钮样式，并根据按钮的属性动态生成对应的样式。

$buttons: (
  primary: (background-color: blue, border-radius: 4px),
  secondary: (background-color: green, border-radius: 8px),
  tertiary: (background-color: orange, border-radius: 12px)
);

@each $name, $properties in $buttons {
  .btn-#{$name} {
    background-color: map-get($properties, background-color);
    border-radius: map-get($properties, border-radius);
  }
}

生成的 CSS 代码如下：

.btn-primary {
  background-color: blue;
  border-radius: 4px;
}

.btn-secondary {
  background-color: green;
  border-radius: 8px;
}

.btn-tertiary {
  background-color: orange;
  border-radius: 12px;
}