html - 変数を組み合わせた SCSS の for ループ

Question

たくさんの要素があります: (#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;
        }
    }
}

Answer 1

補間を使用して変数名を生成する代わりに、リストを作成し、nthメソッドを使用して値を取得できます。補間が機能するためには、構文はhopper#{$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;
        }
    }
}

Answer 2

SASS 変数には、補間内でドル記号をプレフィックスとして付ける必要があるため、 があるすべての場所#{i}は実際には#{$i}. 補間に関する SASS リファレンスで他の例を見ることができます。