SASS循环简化重复代码

Question

我有这组重复的类（出于演示目的简化了变量名称和整体代码）：

&-category01 { background: linear-gradient((nth($colors-category01, 1), nth($colors-category01, 2)); }
&-category02 { background: linear-gradient((nth($colors-category02, 1), nth($colors-category02, 2)); }
&-category03 { background: linear-gradient((nth($colors-category03, 1), nth($colors-category03, 2)); }
&-category04 { background: linear-gradient((nth($colors-category04, 1), nth($colors-category04, 2)); }

$colors-... 位来自地图：

$colors-category01: (#ab1b99, #8f017d);
$colors-category02 (#d2544b, #87352f);

如何使用 SASS 循环简化此代码？

请记住，变量插值在循环或混入中无效。还有，我的真实代码比这个实际情况要复杂。

我的目标是将其作为输出：

.category01 { linear-gradient(#ab1b99, #8f017d); }
.category02 { linear-gradient(#d2544b, #87352f); }
(etc...)

Answer 1

如果所有颜色类别变量中的颜色数量相同，您可以创建一个新变量，它只是一个包含实际值的所有变量的列表，然后使用 @each函数。

有关详细信息，请参阅 @each loop with index。

$colors-category01: (#ab1b99, #8f017d);
$colors-category02: (#d2544b, #87352f);
$colors-category03: (#ffffff, #000000);
$colors-category04: (#f0f0f0, #333333);

$color-categories: $colors-category01, $colors-category02, $colors-category03, $colors-category04;


@each $category in $color-categories {
  $i: index($color-categories, $category);

  .category0#{$i} {
    background-image: linear-gradient(nth($category, 1), nth($category, 2));
  }
}

结果：

.category01 {
  background-image: linear-gradient(#ab1b99, #8f017d);
}
.category02 {
  background-image: linear-gradient(#d2544b, #87352f);
}
.category03 {
  background-image: linear-gradient(#ffffff, #000000);
}
.category04 {
  background-image: linear-gradient(#f0f0f0, #333333);
}

不幸的是，如果实际情况是您的不同颜色类别实际上包含不同数量的颜色，那么事情就会变得复杂得多。我个人无法想出一种方法可以循环遍历这些映射中的无限数量的值并将 background-image 值链接在一起。（这并不是说它不能完成，但它最终可能会比使用循环节省的时间花费更长的时间来弄清楚。）

但如果您真的愿意，您可以做一堆 @if 语句来涵盖合理数量的可能性。

$colors-category01: (#ab1b99, #8f017d);
$colors-category02: (#d2544b, #87352f);
$colors-category03: (#ffffff, #000000, #2d2d77);
$colors-category04: (#f0f0f0, #333333, #00ff5e, #ffa900);

$color-categories: $colors-category01, $colors-category02, $colors-category03, $colors-category04;

@each $category in $color-categories {
  $i: index($color-categories, $category);

  .category0#{$i} {
        @if length($category) == 2 {
            background-image: linear-gradient(nth($category, 1), nth($category, 2));
        }
        @if length($category) == 3 {
            background-image: linear-gradient(nth($category, 1), nth($category, 2), nth($category, 3));
        }
        @if length($category) == 4 {
            background-image: linear-gradient(nth($category, 1), nth($category, 2), nth($category, 3), nth($category, 4));
        }

        //et cetera
  }
}

输出：

.category01 {
  background-image: linear-gradient(#ab1b99, #8f017d);
}
.category02 {
  background-image: linear-gradient(#d2544b, #87352f);
}
.category03 {
  background-image: linear-gradient(#ffffff, #000000, #2d2d77);
}
.category04 {
  background-image: linear-gradient(#f0f0f0, #333333, #00ff5e, #ffa900);
}

SASS循环简化重复代码

SASS loop to simplify repetitive code

css

each

loops

sass

mixins