@eachループwithインデックス

Question

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

Answer 1

まず、@each機能はコンパスから、しかしサスからのものではありません。

---

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

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

    // ... do something fancy with $c 
} 

Answer 2

：はい、あなたは@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/

Answer 3

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

$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関数を追加すると、より効率的になります。したがって、範囲（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)); 
} 

link.