Sassでオブジェクトの中からデータを抜き出して値にするみたいなことがやりたい
意味がわからん・・・
ようはこういうの。そんでこれをfor inループで回して吐き出したいみたいな。
var color = { red : '#ff2727', blue : '#2755ff', black : '#0c0c0c', white : '#fdfdfd' }; // 例えば color.red // => #ff2727 // そんで for ( var c in color ) { console.log(color[c]) // => #ff2727, #2755ff, ... }
つまりcolorの名前とカラーコード定義しといたらその分、下みたいなクラス吐くみたいなのがやりたい。
.red { color: #ff2727; } .blue { color: #2755ff; } .black { color: #0c0c0c; } .white { color: #fdfdfd; }
結論から言うと、同じようにやるにはkeyとvalueを別々の配列(みたいなもの)で定義する必要がある。つまりめんどい。
配列(みたいなもの)
カンマか半スペで区切ると配列になる。
$list = red, blue, black, white;
index(list, value)
index関数を使うと対象の配列でvalueが何番目にあるかが取れる
index($list, red) // => 1 (Sassでは配列は1始まり)
nth(list, n)
nth関数を使うと対象の配列のn番目のvalueを取れる
nth($list, 1) // => red
@each $value in $listでループ
@each $color in $list { // 変数を文字列として出力する場合は #{$variable} #{$color} // => red, blue, black, white }
組み合わせる
$colors: red, blue, black, white; $color_codes: #ff2727, #2755ff, #0c0c0c, #fdfdfd; @each $color in $colors { $n: index($colors, $color); $color_code: nth($color_codes, $n); // output .#{$color} { color: $color_code; } }
これをコンパイルすると
.red { color: #ff2727; } .blue { color: #2755ff; } .black { color: #0c0c0c; } .white { color: #fdfdfd; }
こうなる。イェイ!
こんなことせんでもいいんやろか・・・