こんにちは。駆け出しコーダーのYUYA MATSUURAです。
フリーランスとして保険薬剤師業務で生活収入を得ながら、プログラミング言語の取得に励んでいます。
プログラミングのカテゴリー内の記事では、日々学んだ内容をアウトプットすることにより知識の定着を狙うために、
同じくプログラミングの勉強をしている方々に有意義であると思われる内容を記事に起こしていこうと思っています。
本当に便利な “SASS” は、【ネスト】【変数】などを用いることで、従来の “CSS” よりも効率がUPしている事と思われますが、
実は”SASS”では他の関数のようにfor文を書くことが出来ますので、今回は実例を用いて解説したいと思っております。
では、よろしくお願いいたします！
繰り返し文は”SASS”でも記述することが出来る
例題として、CSS内で「5pxずつ大きくなる”margin-bottom”のclassを量産したい」としましょう。
SASSでの繰り返し文（for文）は以下のように記述します。
@for 「任意の変数名（$○○）」from「開始時の値」through（またはto）「終了時の値」 { }
{ } の中に変数を含んだ処理を記載します。
なお、throughとtoの違いですが、”through”はその値を含み、”to”は含みません。
@for $i from 1 through 3 {} と記載した場合は”3″を含み、1~3までを変数に代入して処理をします。
to 3 {} と記載した場合は”3″は含まないので、1~2までを変数に代入して処理をします。
@for $i from 1 to 4 {
.mb#{$i * 5} {
margin-bottom: #{$i * 5}px;
}
}実際にSASSでfor文を記載してみました。
$i で任意の変数名を取り、1~4まで {} の中の処理に代入していきます。
すなわち “$i * 5″の部分に1~4を順に代入していくのですが、
変数名をセレクタやプロパティに記述する際は『#{ }』で囲うと言うルールがありますので、
今回もそのように囲って記述しています。そういうもんと思ってください。
.mb5 {
margin-bottom: 5px;
}
.mb10 {
margin-bottom: 10px;
}
.mb15 {
margin-bottom: 15px;
}
.mb20 {
margin-bottom: 20px;
}↑のSASS文をCSSにコンパイル（変数）した結果です。
“margin-bottom”を調整するclassを複数作ることが出来ました。
このように繰り返し文を用いることで、HTMLの要素に”mb○○”のclass名を付けることで、下に余白を付ける事が出来ます。
HTMLにclassを付けて、CSSに戻ってきて付けたclassに”margin-bottom: ○○px;”と記述する・・・みたいな手順を省くことが出来ました。
through(to)の後には”100″でも”1000″でも取ることが出来る
ここまでの記事を見て、いまいちfor文のお得感を実感できていないかもしれませんが、
極端な例を取ると、through(to)の後には”100″でも”1000″でも取ることが出来るので、
@for $i from 1 through 50 {
.mb#{$i * 5} {
margin-bottom: #{$i * 5}px;
}
}と記述すると、5px刻みのmargin-bottomを指定するclass名を100個爆速で作成することが出来ます。
本記事には、とっても長くなるので（笑）載せませんが、実際に試されてみると、CSSフォルダには100個のmb○○と言うclassを作ることが出来ると思います。
使いようによっては色々な記述を簡単に書くことが出来るので、ぜひお試ししてみてください。
まとめ
今回は”SASS”で繰り返し文（for文）を記述してみました！
for文はJavaScriptなどのプログラミング言語にも登場します。
色々な言語を学んでいると、頭が混乱しそうになりますが、
少しずつ自分の武器になるように、1つずつ身に付けていきましょう！
コメント