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

SCSSでforを使ってループ処理をする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

目次

• SCSSとは
• SCSSの条件文（@for,@each,@while）の書き方
• 実際に書いてみよう

 

SCSSとは

SCSSとは、SASS（Syntactically Awesome Stylesheets：構文的に優れたスタイルシートの意）におけるメタ言語と呼ばれる記法の一つです。

メタ言語は、プログラミング言語を定義する役目を持つ拳固のことを指します。

SCSSを簡単にいうと「CSSを効率的に記述することができるもの」です。

SASSには2つの記法があり、よりCSSに近い形で記述できるのものがSCSSです。

また、現在のweb制作ではSCSSが主流になっています。

 

SCSSの便利な点としては、以下のものといえます。

• 構造におけるネストできる
• 変数が使えたり
• @mixinや@extendなどの機能が使える

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

 

[PR] Webデザインで副業する方法とは

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

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

 

執筆してくれたメンター

橋本真理 web/グラフィックデザイナー。 webサイトのデザイン、コーディングから公開・運用等、またロゴや各種広告などのデザインやイラストを描いたり、日々楽しくお仕事しています。 TechAcademyではWebデザインコース・WordPressコースを担当。 趣味は、ラジオと音楽と踊ること。自慢は目がいいこと。

 

 

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

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