76

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

3 に答える 3

126

まず第一に、@each関数はコンパスからではなく、サスからのものです。

あなたの質問に答えるために、これは各ループで行うことはできませんが、これを@forループに変換するのは簡単です。これにより、次のことが可能になります。

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

    // ... do something fancy with $c
}
于 2013-02-28T22:23:55.160 に答える
66

この答えを更新するには：はい、@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/

于 2014-06-16T12:31:01.087 に答える
21

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

$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、7、8、9、10）。次に、列挙は次のようになります。

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

リンク。

于 2017-08-06T15:49:43.293 に答える