Для цикла в SCSS с комбинацией переменных

У меня есть куча элементов: (# cp1, # cp2, # cp3, # cp4)

что я хочу добавить цвет фона для использования SCSS.

Мой код:

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@for $i from 1 through 4 {
    #cp#{i} {
        background-color: rgba($(colour#{i}), 0.6);

        &:hover {
            background-color: rgba($(colour#{i}), 1);
            cursor: pointer;
        }
    }
}

Ответ 1

Вместо генерации имен переменных с использованием интерполяции вы можете создать список и использовать метод nth для получения значений. Для интерполяции для работы синтаксис должен быть #{$i}, как указано в бункере.

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

$colors: $colour1, $colour2, $colour3, $colour4;

@for $i from 1 through length($colors) {
    #cp#{$i} {
        background-color: rgba(nth($colors, $i), 0.6);

        &:hover {
            background-color: rgba(nth($colors, $i), 1);
            cursor: pointer;
        }
    }
}

Ответ 2

Как сказал @hopper, основная проблема заключается в том, что вы не префикс интерполированных переменных знаком доллара, поэтому его ответ должен быть помечен как правильный, но я хочу добавить отзыв.

Используйте правило @each вместо цикла @for для этого конкретного случая. Причины:

Вам не нужно знать длину списка
Вам не нужно использовать функцию length() для вычисления длины списка
Вам не нужно использовать функцию nth()
@each правило более семантическое, чем директива @for

Код:

$colours: rgb(255,255,255), // white
          rgb(255,0,0),     // red
          rgb(135,206,250), // sky blue
          rgb(255,255,0);   // yellow

@each $colour in $colours {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

Или, если вы предпочитаете, вы можете включить каждый цвет $в директиве @each вместо объявления переменной $colors:

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0);     // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@each $colour in $colour1, $colour2, $colour3, $colour4 {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

Ссылка Sass для директивы @each

Ответ 3

Переменные SASS по-прежнему должны иметь префикс знака доллара внутри интерполяций, поэтому каждое место у вас есть #{i}, оно действительно должно быть #{$i}. Вы можете увидеть другие примеры в ссылке SASS на интерполяции.