ループ処理(each・for・while)で繰り返し記述する手間を省くプログラミング用語に「ループ処理」というものがあります。これは何か決まった処理を繰り返し行うことを命令するというものです。Sassを使えば、ループ処理によって同じようなCSSを繰り返し記述する手間を省くことができます。ブックマークHTML・CSS公開日:2019/06/14最終更新日:2019/06/14目次1.@eachで配列の個数分、繰り返し処理を行う2.@forで決めた回数分、繰り返し処理を行う3.@whileで条件式にもとづいて、繰り返し処理を行う1.@eachで配列の個数分、繰り返し処理を行う1つの変数の中に、複数の値を入れたものを「配列」といいます。sizeという変数の中に3つの値を入れてみましょう。値は「,(カンマ)」で区切ります。80px;そして「@each」を使うと、この配列の個数分、繰り返しの処理をすることができます。$size;}実際に使ってみましょう。}}コンパイルします。80px;}2.@forで決めた回数分、繰り返し処理を行う@forを使うと、指定した回数分だけ繰り返しの処理を行うことができます。.box1、.box2、.box3...と連続したクラスに対してプロパティ・値を指定するというような場合に利用できます。@forの書き方です。}}開始値と終了値の箇所には数字が入ります。1〜3というふうにすると、.box1、.box2、.box3というふうにクラスが出力されます。変数「i」のところに数字が入り、繰り返されると1ずつ増えていくということです。`#{$i}`というのは編集を文字列として出力する際の記述方法です。実際の例を見てみましょう。以下のサンプルでは、関数lighten()で少しずつ色を変化させています。}}コンパイルします。#0059b3;}3.@whileで条件式にもとづいて、繰り返し処理を行う@whileを使うと@forより柔軟に繰り返し処理が行えます。@whileのあとに条件式を記述し、条件を満たさなくなるまで何度も繰り返し処理を行います。繰り返し処理}@forと違い、繰り返しが起きても変数に変化は起きません。そのため繰り返し処理の内容には変数+1などの演算処理を記述しておきます。14px・16px・18pxと、2pxずつ違うフォントサイズを出力してみます。}コンパイル結果です。18px;}ループ処理(each・for・while)と、条件分岐(if)を組み合わせると、さらに工夫が加えられます。次のレッスンで解説します。