29

SASSにリストがあり、ブラケット表記を使用してアイテムにアクセスしようとしています:

$collection[1];

しかし、それは私にエラーを与えます。

これを行う他の方法はありますか？

なぜ私はこれをしたいのですか？

サーバーによって割り当てられた色に従って、さまざまな要素に設定する必要がある色のリストがあります。マークアップには番号付きのクラス ( color-0、color-1など) があります。私が目指しているCSSは次のとおりです。

.color-0 { color: red }
.color-1 { color: orange }
.color-2 { color: green }
.color-3 { color: blue }
/* many more, with more complex colors... */

すべてを手で書く代わりに、ループで SASS コレクションを使用できると考えました。

$color-collection: ('red', 'orange', 'green', 'blue');
$color-count: length($color-collection);

@for $i from 0 to $color-count {
    .color-#{$i} {
        color: $color-collection[ $i ];
    }
}

しかし、これは私に次のエラーを与えます:

構文エラー: "...color-collection" の後の CSS が無効です: ";" が必要ですが、"[ $i ];" でした

どうすればこれを達成できますか?

4

4 に答える 4

43 
$color-collection: ('red', 'orange', 'green', 'blue');

@for $i from 0 to length($color-collection) {
    .color-#{$i} {
        color: unquote(nth($color-collection, $i+1));
    }
}

引用符で囲まれた文字列を渡したい場合nth()にも、を使用します。unquote()

ただし、私は個人的にはしません：

$color-collection: (red, rgba(50,50,80, .5), darken(green, 50%), rgba(blue, .5));

@for $i from 0 to length($color-collection) {
    .color-#{$i} {
        color: nth($color-collection, $i+1);
    }
}

それなら、どんな色のオブジェクトでも渡すことができるからです。

于 2013-02-26T00:47:51.293 に答える
6

@eachの代わりに ruleを使用できます@for。これはよりセマンティックで高速であり、コードが短くなります。

$color-collection: (red, orange, green, blue);

@each $color in $color-collection {
    .color-#{$color} {
        color: $color;
    }
}

または、必要に応じて、 list をディレクティブ$color-collectionに直接使用できます。@each

@each $color in red, orange, green, blue {
    .color-#{$color} {
        color: $color;
    }
}

@bookcaseyが言うように、引用符で囲まれていない文字列を使用することをお勧めします。これは、任意の色のオブジェクトまたは関数を渡すことができるためです

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

于 2013-12-09T16:36:22.603 に答える
3

これに出くわし、ブックケーシーの答えをテストしました。これはうまく機能しますが、代わりに色の名前をクラスとして使用したかったのです。このコードは必要に応じて機能することがわかりました。

$colors: ( 'black', 'white', 'red', 'green', 'blue' );

@for $i from 0 to length($colors) {
    $thisColor: unquote(nth($colors, $i+1));
    .color-#{$thisColor} {
        color: $thisColor;
    }
}

#{...} を使用すると、関数も使用できるため、ルールで直接使用できない任意の名前を使用する必要がある場合は、使用できます

@for $i from 0 to length($colors) {
    .color-#{unquote(nth($colors, $i+1))} {
        // some rules that don't actually use the var
        // so there's no need to cache the var
    }
}

出力：

.color-black { color: black; }
.color-white { color: white; }
.color-red { color: red; }
// etc..

これが他の誰かに役立つことを願っています!

于 2013-12-08T05:54:18.140 に答える