【sass】@forを使ってnth-childでカラー分け
極力htmlにクラスタグを追加せずに nth-childでループ文使ってカラーわけできればよいのにって考えて
phpだとfor文で変数(可変変数)持ってこれるのに、sassではそれができないからウボァーーー!!!ってなってました。
中々できなかったけどズバリなサンプルがあったのでメモメモ
やっぱりfor文苦手だわぁ
まず変数セット
$color1:#000; $color2:#ccc; $color3:red;
そんでfor文に定義した変数をセットでループさせればOK
$colors: $color1, $color2, $color3; @for $i from 1 through length($colors) { li:nth-child(#{$i}){ color:nth($colors, $i); } }for
配列格納はこっちでもよいんだけど、sassで使いまわし前提なので変数定義のほうがよいかな?
$colors: (#000,#ccc,red);