web-dev-qa-db-ja.com

インデックス付きの@eachループ

@eachループの要素インデックスを取得できるかどうか疑問に思っていました。

次のコードがありますが、$i変数はこれを行う最良の方法でした。

現在のコード：

$i: 0;
$refcolors: #55A46A, #9BD385, #D9EA79, #E4EE77, #F2E975, #F2D368, #F0AB55, #ED7943, #EA4E38, #E80D19;

@each $c in $refcolors {
    $i: $i + 1;
    #cr-#{$i} strong {
        background:$c;
    }   
}
sasseach
59
ignacioricci

まず、@each関数はコンパスからではなく、Sassからです。

あなたの質問に答えるために、これは各ループで行うことはできませんが、これを @for ループ、これはこれを行うことができます：

@for $i from 1 through length($refcolors) {
    $c: nth($refcolors, $i);

    // ... do something fancy with $c
}
93
Wouter J

この回答を更新するには：はい、@eachループ：

$colors-list: #111 #222 #333 #444 #555;

@each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
    .stuff-#{$i} { 
        color: $current-color;
    }
}

ソース： http://12devs.co.uk/articles/handy-advanced-sass/

54
Jimmerz28

場合によっては、配列またはマップを使用する必要があります。私は配列の配列を持っていました、すなわち：

$list = (('sub1item1', 'sub1item2'), ('sub2item1', 'sub2item2'));

オブジェクトに変換するのが最も簡単であることがわかりました。

$list: (
    'name': 'thao',
    'age': 25,
    'gender': 'f'
);

そして、以下を使用して$iを取得します。

@each $property, $value in $list {
    $i: index(($list), ($property $value));

Sassチームも以下を推奨しましたが、私はあまりファンではありません。

[...]上記のコードは、これに対処する方法です。 range（$ n）のようなSass関数を追加することにより、より効率的にすることができます。そのため、そのrange（10）=>（1、2、3、4、5、6、6、7、8、9、10）。その後、enumerateは次のようになります。

@function enumerate($list-or-map) {
    @return Zip($list-or-map, range(length($list-or-map));
}

リンク

14
nikk wong