slowjet

is a part of a carburetor

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;
}

こうなる。イェイ!

こんなことせんでもいいんやろか・・・