本記事では、SCSSでfor文・while文・each文の使い方について解説しています。実際にサンプルコードを用意しているので、どのような場面で使用するのかが少しは理解できると思います。
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
for文の使い方
for文の基本的な使い方は以下のとおりです。
@for $i from 数値1 through 数値2 {
/* 繰り返したい処理を記述する */
}
@for $i from 数値1 to 数値2 {
/* 繰り返したい処理を記述する */
}- 数値1：変数$iに初期値として設定したい値を指定する
- 数値2：ループ処理の終了値を指定する(変数$iが終了値に達したタイミングでループ処理は終了します)
数値2にセットした値までループ処理を行うか行わないかの違いです。例えば「@for $i from 1 through/to 5」では、throughは1～5までループ処理を実行しますが、toは1～4しかループ処理を実行しません。
実際に、for文を使用したサンプルコードを用意したので動作確認してみましょう。下記のコードは文字サイズ(font-size)を1pxの間隔で生成しています。
@for $i from 15 through 30 {
.fs-#{$i} {
font-size: $i + px;
}
}.fs-15 {
font-size: 15px;
}
.fs-16 {
font-size: 16px;
}
.fs-17 {
font-size: 17px;
}
.fs-18 {
font-size: 18px;
}
.fs-19 {
font-size: 19px;
}
.fs-20 {
font-size: 20px;
}
.fs-21 {
font-size: 21px;
}
.fs-22 {
font-size: 22px;
}
.fs-23 {
font-size: 23px;
}
.fs-24 {
font-size: 24px;
}
.fs-25 {
font-size: 25px;
}
.fs-26 {
font-size: 26px;
}
.fs-27 {
font-size: 27px;
}
.fs-28 {
font-size: 28px;
}
.fs-29 {
font-size: 29px;
}
.fs-30 {
font-size: 30px;
}乗算を使用することで、2px・3px間隔で生成することも可能ですが、そのような場合は次に紹介するwhile文を使用することをオススメします。
while文の使い方
while文の基本的な使い方は以下のとおりです。
@while 条件式 {
/* 繰り返したい処理を記述する */
}条件式：条件式を設定します。while文は条件式に一致(true)している間はループするので、いつかのタイミングで条件式を抜けるように記述しないと無限ループすることになります。
実際に、while文を使用したサンプルコードを用意したので動作確認してみましょう。下記のコードは余白(margin)を10pxの間隔で生成しています。
$loopStart: 10;
@while $loopStart <= 100 {
.mt-#{$loopStart} {
margin-top: $loopStart + px;
}
$loopStart: $loopStart + 10;
}.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.mt-40 {
margin-top: 40px;
}
.mt-50 {
margin-top: 50px;
}
.mt-60 {
margin-top: 60px;
}
.mt-70 {
margin-top: 70px;
}
.mt-80 {
margin-top: 80px;
}
.mt-90 {
margin-top: 90px;
}
.mt-100 {
margin-top: 100px;
}each文の使い方
each文は、for文やwhile文とは少し異なり配列や連想配列を展開する時に使用します。
each文の基本的な使い方は以下のとおりです。
$variables: val1, val2, val3;
@each $v in $variables {
/* 繰り返したい処理を記述する */
}- $variables：複数の値が代入されている(配列)
- $v：$variablesに代入されている値が一つずつ渡される
実際に、each文を使用したサンプルコードを用意したので動作確認してみましょう。下記のコードは配列に代入したカラー名のクラスを生成しています。
$colors: red, green, blue;
@each $color in $colors {
.color-#{$color} {
color: $color;
}
}.color-red {
color: red;
}
.color-green {
color: green;
}
.color-blue {
color: blue;
}
