Я пытаюсь запустить установку, которая будет увеличивать класс с 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. Я думаю, это может быть что-то простое, ям отсутствует, хотя. Любое понимание будет оценено!