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循环简化此代码？

请记住，变量插值在循环或mixin中无效。另外，我的真实代码比这种实际情况更复杂。

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

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

Answer 1

如果所有颜色类别变量中的颜色数量相同，则可以创建一个新变量，该变量只是包含实际值的所有变量的列表，然后使用{{1循环遍历该新变量功能。

有关详情，请参阅@each loop with index。

@each

结果：

$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
  }
}

SASS循环简化重复代码

1 个答案: