sass - n 番目のアイテムに対する Sass ループ

Question

それぞれ異なる背景色が必要な 4 つのリスト項目があります。

4 つの異なる色変数を Sass リストに入れ、それぞれを通過させることができますが、そのループのコンテンツ ブロックでは、1、2、3、または 4を使用して、どの変数について話している$colorかを明らかに指定する必要があります。<li>:nth-of-type

<li>ループの各ターンで必要なものを指定する方法がわかりません。

何か案は？

Answer 1

これでうまくいくはずです：

$colors: (#000, #F00, #0F0, #00F);
@for $i from 1 through length($colors) {
   li:nth-of-type(#{$i}) {
       background: nth($colors, $i);
   }
}

以下を生成します。

li:nth-of-type(1) {
  background: black; }

li:nth-of-type(2) {
  background: red; }

li:nth-of-type(3) {
  background: lime; }

li:nth-of-type(4) {
  background: blue; }