SCSSでforを使ってループ処理をする方法を現役エンジニアが解説【初心者向け】
初心者向けにSCSSでforを使ってループ処理をする方法について解説しています。SCSSはCSSのメタ言語のひとつで、ネストや変数が使用できるのが特徴です。SCSSの条件文を使ってスタイルの指定をする場合の書き方と例を学習しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
SCSSでforを使ってループ処理をする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
SCSSでforを使ってループ処理をする方法について詳しく説明していくね！
お願いします！
目次
SCSSとは
SCSSとは、SASS（Syntactically Awesome Stylesheets：構文的に優れたスタイルシートの意）におけるメタ言語と呼ばれる記法の一つです。
メタ言語は、プログラミング言語を定義する役目を持つ拳固のことを指します。
SCSSを簡単にいうと「CSSを効率的に記述することができるもの」です。
SASSには2つの記法があり、よりCSSに近い形で記述できるのものがSCSSです。
また、現在のweb制作ではSCSSが主流になっています。
SCSSの便利な点としては、以下のものといえます。
- 構造におけるネストできる
- 変数が使えたり
- @mixinや@extendなどの機能が使える
このような機能を使うことで、スタイルの定義をより効率的に行うことが可能です。
SCSSの条件文（@for,@each,@while）の書き方
それぞれの条件の書き方を詳しくみていきましょう。
@forの書き方
@forは一定の区間を繰り返させたい場合に使いましょう。
①
@for 変数 from 開始の値 through 終了の値 {
//変数が開始の値〜終了の値の間、処理が繰り返されます
}
②
@for 変数 from 開始の値 to 終了の値 {
//変数が開始の値〜終了の値未満の間、処理が繰り返されます
}
※throughとtoの違いは終了の値を含む、含まないという点です。
＠eachの書き方
＠eachはリストの中身を繰り返させたい場合に使用しましょう。
@each リストの要素の変数 in リストの変数{
//リストの要素１つ１つに対して処理が繰り返されます
}
※あらかじめリストを定義しておかなければなりません。
@whileの書き方
@whileは一定の条件の元で繰り返させたい場合に使うものです。
@while 条件式 {
//条件を満たす間この部分の処理が繰り返されます
}
実際に書いてみよう
実際に@for、@each、@whileを使ってかいてみましょう。
実際に書いてみると、CSSに比べてとっても効率的にかけることがわかります。
今回はclass名を指定するだけで、ボックスのwidthと背景色とfont-sizeが適用されるものを作ってみましょう。
//HTML <div class="width-1 size-1 color-tomato">A</div> <div class="width-2 size-2 color-skyblue">B</div> <div class="width-3 size-3 color-pink">C</div> <div class="width-4 size-4 color-gold">D</div> <div class="width-5 size-5 color-orange">E</div>
//SCSS
//for width-のクラス
@for $i from 1 through 5 {
.width-#{$i} {
width: $i * 10rem;
}
}
//each color-のクラス
$colorList: tomato, skyblue, pink, gold, orange;
@each $colorName in $colorList{
.color-#{$colorName} {
background: $colorName;
}
}
//while size-のクラス
$j: 1;
@while $j < 6 {
.size-#{$j} {
font-size: #{$j}em;
}
$j: $j+1;
}
このように表示されました。
See the Pen
dyYbjBK by marihashimoto (@mari877)
on CodePen.
もし同じものをCSSで書くと、、、
.width-1 {
width: 10rem;
}
.width-2 {
width: 20rem;
}
.width-3 {
width: 30rem;
}
.width-4 {
width: 40rem;
}
.width-5 {
width: 50rem;
}
.color-tomato {
background: tomato;
}
.color-skyblue {
background: skyblue;
}
.color-pink {
background: pink;
}
.color-gold {
background: gold;
}
.color-orange {
background: orange;
}
.size-1 {
font-size: 1em;
}
.size-2 {
font-size: 2em;
}
.size-3 {
font-size: 3em;
}
.size-4 {
font-size: 4em;
}
.size-5 {
font-size: 5em;
}
こういった場合、繰り返し構文を使って効率的にコーディングしましょう。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
執筆してくれたメンター
| 橋本真理
web/グラフィックデザイナー。 webサイトのデザイン、コーディングから公開・運用等、またロゴや各種広告などのデザインやイラストを描いたり、日々楽しくお仕事しています。 TechAcademyではWebデザインコース・WordPressコースを担当。 趣味は、ラジオと音楽と踊ること。自慢は目がいいこと。 |
SCSSでforを使ってループ処理をする方法がよくわかったので良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
