使用SASS循环简化重复CSS类代码的实现方法

这题我太熟了！你现在的代码都是重复的「选择器后缀+对应颜色变量」模式，用Sass的@each循环就能轻松搞定，不仅能砍掉冗余代码，后续加新分类也只要改数据就行，维护起来超省心。

最优方案：映射（Map）整合数据 + @each循环 #

首先咱们把分散的$colors-categoryXX变量整合到一个**Sass映射（Map）**里，把所有分类的颜色数据集中管理，遍历起来清晰又高效：

// 把所有分类的颜色数据整合进Map
$colors-categories: (
  category01: (#ff0000, #cc0000),
  category02: (#00ff00, #00cc00),
  category03: (#0000ff, #0000cc),
  category04: (#ffff00, #cccc00)
);

// 用@each循环自动生成所有样式
@each $category-name, $gradient-colors in $colors-categories {
  &-#{$category-name} {
    background: linear-gradient(nth($gradient-colors, 1), nth($gradient-colors, 2));
  }
}

代码说明： #

• $colors-categories是一个映射，键是分类后缀名（比如category01），值是对应渐变的两个颜色组成的列表；
• @each会遍历映射里的每一组键值对：$category-name拿到分类后缀，$gradient-colors拿到对应的颜色列表；
• 用Sass的**插值语法#{$category-name}**把变量名插入到选择器中，自动生成&-category01、&-category02这类选择器；
• 最后用nth()函数提取颜色列表里的两个颜色，生成渐变背景。

编译后的CSS和你手写的完全一致，后续要加新分类，只要在$colors-categories里加一组键值对就行，再也不用复制粘贴重复代码～

备选方案：保留原变量 + @for循环 #

如果你因为其他代码依赖，必须保留原来的$colors-categoryXX变量，也可以用列表配合@for循环实现：

// 保留你原来的变量
$colors-category01: (#ff0000, #cc0000);
$colors-category02: (#00ff00, #00cc00);
$colors-category03: (#0000ff, #0000cc);
$colors-category04: (#ffff00, #cccc00);

// 把分类后缀名放进一个列表
$category-list: category01, category02, category03, category04;

// 用@for循环遍历列表
@for $i from 1 through length($category-list) {
  $current-category: nth($category-list, $i);
  // 用get-function获取对应的颜色变量
  $current-colors: get-function('colors-#{$current-category}')();
  
  &-#{$current-category} {
    background: linear-gradient(nth($current-colors, 1), nth($current-colors, 2));
  }
}

不过这种方式不如Map方案优雅，数据分散容易漏改出错，更推荐第一种Map的写法。

内容的提问来源于stack exchange，提问作者ronaldpoi