web-dev-qa-db-ja.com

変数の組み合わせを使用したSCSSのforループ

要素がたくさんあります：（＃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;
        }
    }
}
htmlcsssass
30
tobyn

補間を使用して変数名を生成する代わりに、リストを作成し、nthメソッドを使用して値を取得できます。補間が機能するためには、構文は#{$i}、hopperで述べたとおり。

$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;
        }
    }
}
56
Xabriel

@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;
        }
    }
}
_

または、$ colors変数を宣言する代わりに、各$ colourを@eachディレクティブに含めることができます。

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

_@each_ディレクティブのSassリファレンス

36
Alex Guerrero

SASS変数には、補間内でドル記号を前に付ける必要があるため、#{i}、実際には#{$i}。 interpolations のSASSリファレンスで他の例を見ることができます。

18
hopper