SASS | @forと@ eachループ印刷の値がリストから出る

Question

私はsassを使用してリストから@eachと@forループを使って値を出力しますが、これまでに1つずつ印刷してその値をコンパイルするとcssnth('', $n)機能を使用してもリストのすべての値を取ります。 私は次のcodeとgulpを自分のタスクランナーとして使用しています。

// SASS CODE 
 
$btn-default: darken(#DDD, 5%); 
 
$btn-alert: red; 
 
$btn-class: "btn-default", "btn-alert"; 
 
$btn-color: $btn-default, $btn-alert; 
 

 
@each $btn in $btn-class { 
 
    .#{unquote($btn)} { 
 
     @for $i from 1 through length($btn-color) { 
 
      background-color: nth($btn-color, $i); 
 
     } 
 
    } 
 
} 
 

 

 
/* CSS CODE : OUTPUT */ 
 
.btn-default { 
 
    background-color: #d0d0d0; 
 
    background-color: red; } 
 

 
.btn-alert { 
 
    background-color: #d0d0d0; 
 
    background-color: red; }

私はそれはだけではなく、エラーを返す値を取得していないときに私はsassでさまざまな方法で試してみましたプロジェクトで立ち往生少しです。

Answer 1

代わりに、必然的に各ルールセットには2つのプロパティをレンダリングする内部@forループを導入する、単一のループを使用してみてください。しかし、長期的には

@for $i from 1 through length($btn-class) { 
    #{nth($btn-class, $i)} { 
    background-color: nth($btn-color, $i) 
    } 
} 

、私が代わりにマップを使用することをお勧めします。このようにすると、クラス名と色の間に明確な関連があり、大きな要素リストで潜在的な間違いを避けることができます。

$buttons: (
    btn-default: $btn-default, 
    btn-alert: $btn-alert 
); 

@each $class, $color in $buttons { 
    .#{$class} { 
    background-color: $color; 
    } 
}