SASS @eachループ

Question

は、私は2つの変数のリストを持っています。

@each $id, $color in ($ids, $colors) { 
    .category--#{$id}, 
    .post--#{$id} { 
     color: #{$color}; 
    } 
} 

私は、次の

.category--21, 
.post--21 { 
    color: #fff 
} 

.category--33, 
.post--33 { 
    color: #000 
} 

.category--73, 
.post--73 { 
    color: #333 
} 

を表示したいしかし、私は私の構造の代わりにこれ

.category--21, 
.post--21 { 
    color: 33; 
} 

.category--#fff, 
.post--#fff { 
    color: #000; 
} 

わからないを取得しています。明らかに私ははるかに長い変数リストを持っています（デモ目的のためにそれぞれ3つ追加されました）。

建設的なフィードバックを歓迎します。ありがとう

Answer 1

@eachは、キーと値のペアを1つのアイテムとして持たないため、正しいオプションではないと思います。以下は、どのようなdocumentation says about @each次のとおりです。（強調は私です）

@eachディレクティブも、@each $ VAR1、VAR2 $のように、複数の変数を使用することができます... <リストに>。 < list>がリストのリストである場合、のサブリストの各要素は、それぞれの変数に割り当てられます。

あなたはあなたのケースで$idsが1つのリストとして扱われると$colorsは別として扱われる、上記の文から見ることができるように。それは

• 第一反復$idが21であることを意味し、$colorが33と73
• 第二の繰り返し$idが割り当てられていない$colorが#000と#333が割り当てられていないで、#fffです。

---

あなたは以下のスニペットのよう@forループを使用することが良いかもしれない：

$ids: 21, 33, 73; 
$colors: #fff, #000, #333; 

@for $i from 1 through length($ids) { 
    $id: nth($ids, $i); 
    $color: nth($colors, $i); 
    .category--#{$id}, 
    .post--#{$id} { 
     color: #{$color}; 
    } 
} 

Answer 2

をこんにちは、あなたがそれを誤用：Dの@eachは

下記参照リストで反復リストです

$pair: (21, #fff), (33, #000), (73, #333); 

@each $id, $color in $pair { 
    .category-#{$id}, 
    .post-#{$id} { 
     color: #{$color}; 
     height: 20px; 
    } 
} 

ドキュメントの参照：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-multi-assign