SASS -增加一个类并选择列表中的下一个变量

Question

我正在尝试一个设置，它将一个类从1递增到12，并根据变量列表(也是12个变量)设置背景颜色。

我已经接近了，但没有得到我所希望的结果。这是我第一次尝试使用SASS中的控制指令，所以请原谅我的无知。

目前，我正在成功地递增这个类。这是我错过的选择递增变量的一部分。

@mixin colors {
        $colors: $orange, $blue, $lightBlue, $teal, $lightTeal, $green, $lightGreen, $darkOrange, $orange, $lightOrange, $yellow, $lightYellow;
        @each $color in $colors {
            background-color:#{$color};
        }       
    }

@for $i from 1 through 12 { 
    .block-#{$i} {
        span {
            @include colors;
        }
    }
}

这将输出类似以下内容：

.block-10 span {
    background-color: #faa21b;
    background-color: #005ca8;
    background-color: #0079c3;
    background-color: #0088a8;
    background-color: #009386;
    background-color: #00a05e;
    background-color: #589c45;
    background-color: #d4772b;
    background-color: #faa21b;
    background-color: #f7971f;
    background-color: #f9cc2a;
    background-color: #f6ee32;
}

理想情况下，我希望有一个背景色声明，而不是12个。我认为这可能是我遗漏的简单东西。任何有见地的人都将不胜感激！

Answer 1

像这样的东西？(不确定为什么要使用mixin)：

$orange: #faa21b;
$blue: #005ca8;
$lightBlue: #0079c3;
$teal: #0088a8;
$lightTeal: #009386;
$green: #00a05e;
$lightGreen: #589c45;
$darkOrange: #d4772b;
$orange: #faa21b;
$lightOrange: #f7971f;
$yellow: #f9cc2a;
$lightYellow: #f6ee32;
$i: 1;

@each $color in $orange, $blue, $lightBlue, $teal, $lightTeal, $green, $lightGreen, $darkOrange, $orange, $lightOrange, $yellow, $lightYellow {
    .block-#{$i} {
        span {
            background-color:#{$color};
        }
    }
    $i: $i + 1;
}

输出：

.block-1 span {
  background-color: #faa21b; }

.block-2 span {
  background-color: #005ca8; }

.block-3 span {
  background-color: #0079c3; }

.block-4 span {
  background-color: #0088a8; }

.block-5 span {
  background-color: #009386; }

.block-6 span {
  background-color: #00a05e; }

.block-7 span {
  background-color: #589c45; }

.block-8 span {
  background-color: #d4772b; }

.block-9 span {
  background-color: #faa21b; }

.block-10 span {
  background-color: #f7971f; }

.block-11 span {
  background-color: #f9cc2a; }

.block-12 span {
  background-color: #f6ee32; }