Sassの@for、@while、@eachの「ループ処理（繰り返し）」の使い方

2020年1月28日

Sassではループ処理ができるらしいけど、どんなやり方があるか知りたい。

Sassには３種類のループ処理がある。これらわかりやすく順番に解説していこう！

今回はSassで使える「@for、@while、@each」の３つの「ループ処理（繰り返し）」について、その使い方を具体例付きで解説していこう！

Sassの@forでループ処理（繰り返し）する方法

@for（フォー）のループ処理（繰り返し）は、「開始値」から１つずつ数値を増やしながら（もしくは減らしながら）繰り返して処理をし、「終了値」の値まで来たら、繰り返しを終了する。

@forの構文

@forには次の２つの構文がある。

@for $変数名 from 開始値 through 終了値 {
  処理（スタイルなど）
}

@for $変数名 from 開始値 to 終了値 {
  処理（スタイルなど）
}

from 開始値 through 終了値という書き方とfrom 開始値 to 終了値という書き方があり、「終了値」の指定がthroughかtoかの違いである。

throughで指定した場合は、その数値を「含んで」繰り返し、toで指定した場合は、その数値を「含まず」に繰り返し処理をする。

詳しくは、具体例を見て確認しよう。

@forの「through」と「to」の具体例

「through」と「to」のSASSの具体例

@for $i from 1 through 3 {
  .boxA-#{$i} { width: 10px * $i; }
}
@for $j from 1 to 3 {
  .boxB-#{$j} { width: 10px * $j; }
}

コンパイル後のCSS

.bixA-1{ width: 10px; }
.bixA-2{ width: 20px; }
.bixA-3{ width: 30px; }
.bixB-1{ width: 10px; }
.bixB-2{ width: 20px; }

例では、@for $i from 1 through 3とした場合は3まで増えていき、@for $j from 1 to 3とした場合は2までしか増えていない点に注目しておこう。

また、width: 10px * $i;のように「演算」を組み合わせて、10pxずつ増えていく処理になっている。

@forのひとつずつ減らす処理、デクリメント処理

上記の例では、ひとつずつ増やす（インクリメント）処理だったが、ひとつずつ減らす（デクリメント）処理を行う場合は、単純に「開始値」よりも「終了値」を小さくする事で、ひとつずつ減らす（デクリメント）処理が可能となる。

ひとつずつ減らす処理のSass

@for $i from 3 through 1 {
  .boxA-#{$i} { width: 10px * $i; }
}

コンパイル後のCSS

.bixA-3{ width: 30px; }
.bixA-2{ width: 20px; }
.bixA-1{ width: 10px; }

Sassの@whileでループ処理（繰り返し）する方法

@while（ホワイル）のループ処理（繰り返し）は、「繰り返しを継続する条件式」を記述して、「繰り返しの継続を終了する為の処理」を何度か繰り返す事で、「繰り返しを継続する条件を満たしている間」繰り返し続け、それを超える時に繰り返しが終了するという仕組みだ。

@whileの構文

@while 繰り返しを継続する条件式 {
  処理（スタイルなど）
  繰り返しの継続を終了する為の処理
}

@whileでループ処理（繰り返し）具体例

@whileでループ処理のSass

$i: 100;
@while $i < 500{
  .box-#{$i}{ width: $i;}
  $i: $i + 100;
}

コンパイル後のCSS

.box-100{ width: 100px }
.box-200{ width: 200px }
.box-300{ width: 300px }
.box-400{ width: 400px }

この例では、ます$i: 100;で変数に初期値を代入した上で「繰り返しを継続する条件」として@while $i < 500と指定する。これは「$iが500になるまで繰り返す」という条件になる。

その上で、スタイルとして.box-#{$i}{ width: $i;}を記述し、「繰り返しの継続を終了する為の処理」として$i: $i + 100;と記述する。

つまずきポイント

この$i: $i + 100;が@whileの重要なポイントで、プログラミング初心者の人は「この部分の意味がよくわからない」と言う人が多い。

これは日本語で解説すると「$iに100を足した結果の値を$iに代入する」と言える。

つまり、１回目のループで「初期値$i=100」に対して$iに100を足して「$i= 200」となる。

2回目のループでは1回目の結果を継続し「$i=200」に対して100を足して「$i= 300」となる。この繰り返しを「条件を満たすかぎり」繰り返すのだ。

この結果「$i=400」になった時点で終了となる。

次にループしてしまうと「$i=500」となり「$i < 500（500未満）という条件」を満たさなくなるからだ。

Sassの@eachでループ処理（繰り返し）する方法

@each（イーチ）のループ処理（繰り返し）は、「指定したリスト」の数だけ繰り返し、「リストの内容をひとつずつ表示していき」リストを全部表示したら終了。というシンプルなループだ。

@eachの構文

@each $変数名 in $リスト名{
  処理（スタイルなど）
}

こちらも具体例で確認していこう！

@eachでループ処理（繰り返し）具体例

@eachでループ処理のSass

$nameList: taro, jiro, saburo, shiro;
@each $name in $nameList{
  .img-#{$name} {
    background-image: url(../img/#{name}.jpg);
  }
}

コンパイル後のCSS

.img-taro{ background-image: url(../img/taro.jpg); }
.img-jiro{ background-image: url(../img/jiro.jpg); }
.img-saburo{ background-image: url(../img/saburo.jpg); }
.img-shiro{ background-image: url(../img/shiro.jpg); }

@eachのループ処理（繰り返し）では、まず$nameList: a, b, c, d;のように、任意のリストを変数に入れる。

@each $name in $nameListと記述する事で$nameListに定義したリストを$nameに順番に代入していくというループとなる。

$nameListのリストの内容が全部なくなるまで繰り返して、無くなったらループの終了。

$nameに順番に代入していくという事は、代入する度に、上書きされるという認識で大丈夫。

今回の例で言うと$nameは１回目のループで「taro」になり２回目のループで「jiro」になり「saburo」「 shiro」と順番に変わっていく。

Sassのループ処理（繰り返し）のまとめ

今回確認した「@for、@while、@each」という３つのループは、いずれも「大量の同じような記述」を書くのが面倒な時に使う事で、効率化できる。

それぞれの特徴を理解して、使い所を工夫すれば、面倒な記述を楽にできるだろう。

Sassの基本をもっと学びたい方は、こちらの記事「Sassを基礎から学ぶ」を参考にしておこう。

やはりWEBの学習は「基礎」が一番重要！「時間をかけてしっかり」と基礎を固める事で、実際の仕事の案件の時に「基礎がしっかりしている」と、そこから応用が効いて、たいていの問題は解決するので、不安にならずに済むのだ。

しかし時間をかけて学ぶのが難しい方や、できるだけ速く習得したい方はプログラミングスクールなどを検討するのもありだろう。私も実際にオンラインプログラミングスクールを利用して、プログラミングを習得したのでその良さを実感している。自分にあったスクールを探したい人は、実際に私が使ったスクールをはじめいくつかおすすめのスクールを比較しているので、こちらの記事を参考になるだろう！

スクールは多少の費用がかかるが、その分早く仕事で稼げて元以上のものを得られるメリットも！一度検討してみるのもありだろう。