SassのEach文について

SassのEach文を、喩えを使って理解できるようにまとめた。

そもそもSassとは？

Sassとは、CSSを拡張して扱いやすくしたスタイルシートのことで、「サス」や「サース」と呼ばれる。
記法が SASS記法と SCSS記法の２種類あるが、今回はよりcssの記法に近いSCSS記法を使う。

Sassのループ処理

cssとは違ってSassではループ処理を行うことができる。
ループ処理を行いたいときには、Each文、for文、while文が使える。

Each文とは

今回はその中でもEach文を説明する。
Each文とは、指定したリストの数だけ処理を行なってリストの内容をひとつずつ表示していき、リストの数分全て終わった時に処理を終了するものである。

どうやって書くのか

例：４つの要素にそれぞれ違う背景色とクラス名をつけたい場合

$classNames: red, green, blue, orange;
$colors: #FF0000, #00FF00, #0000FF, #FFA500;

今回は、$classNamesというクラス名の入った配列と、$colorsというカラーコードの入った配列が用意されている。
それぞれ、redには#FF0000を指定したいし、greenには#00FF00、blueには#0000FF、orangeには#FFA500を指定したい。

Each文の書き方としては以下である。

@each $var in $配列A {

$index_key: index($配列A, $var); //indexを取得
$変数B: nth($配列B, $index_key); 

}

これに用意した配列を使って考えていく。

$var in $配列A　
→ $className in $classNames

　ここでは変数 $var を $className 、$配列A を $classNamesとする。
　１回目の処理では変数$className に、配列$classNames　から
　インデックス１番目の redが代入される。
　（Sassの場合、インデックスは０からではなく１からはじまる。）

$index_key: index($配列A, $var);　
→ $index_key: index($classNames, $className);

　$index_key に「１」という値が代入される。
　これは、$classNames　の中の redのインデックスが代入されている。
　（つまり$classNamesの中のredは１番目ということ）

$変数B: nth($配列B, $index_key);
→ $color: nth($colors, $index_key);

　ここでは 変数B を $color 、$配列B を $colorsとする。
　先ほど「１」を代入した $index_key を使って、
　$colors のインデックス１の要素を取り出して $color に代入する。
　（つまり１番目の $color は #FF0000 ということ）

これでredと#FF0000をEach文を使って指定することができる。
Each文はリストの数だけ処理を繰り返すのでこの処理は orange まで続く。

実際使うとこんな感じ

@each $className in $classNames {
    $index_key : index($classNames , $className );
    $color : nth($buttonColor, $index_key);
    &__#{$className} {
    background-color: $color;
  }
}