SCSSでforを使ってループ処理をする方法を現役エンジニアが解説【初心者向け】

初心者向けにSCSSでforを使ってループ処理をする方法について解説しています。SCSSはCSSのメタ言語のひとつで、ネストや変数が使用できるのが特徴です。SCSSの条件文を使ってスタイルの指定をする場合の書き方と例を学習しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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などの機能が使える

このような機能を使うことで、スタイルの定義をより効率的に行うことが可能です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

SCSSの条件文(@for,@each,@while)の書き方

それぞれの条件の書き方を詳しくみていきましょう。

@forの書き方

@forは一定の区間を繰り返させたい場合に使いましょう。

@for 変数 from 開始の値 through 終了の値 {

  //変数が開始の値〜終了の値の間、処理が繰り返されます

}

@for 変数 from 開始の値 to 終了の値 {

  //変数が開始の値〜終了の値未満の間、処理が繰り返されます

}

※throughとtoの違いは終了の値を含む、含まないという点です。

 

@eachの書き方

@eachはリストの中身を繰り返させたい場合に使用しましょう。

@each リストの要素の変数 in リストの変数{
//リストの要素1つ1つに対して処理が繰り返されます
}

※あらかじめリストを定義しておかなければなりません。

 

@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;
}

こういった場合、繰り返し構文を使って効率的にコーディングしましょう。

 

執筆してくれたメンター

橋本真理

web/グラフィックデザイナー。

webサイトのデザイン、コーディングから公開・運用等、またロゴや各種広告などのデザインやイラストを描いたり、日々楽しくお仕事しています。

TechAcademyではWebデザインコース・WordPressコースを担当。

趣味は、ラジオと音楽と踊ること。自慢は目がいいこと。

 

大石ゆかり

SCSSでforを使ってループ処理をする方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。