for文を使った繰り返し処理[SCSS]

for文を使った繰り返し処理[SCSS] マークアップ

CSSでは何行も書く必要があった処理が、SCSSの繰り返し処理を使うと数行で記述できます。この記事では、for文について見ていきましょう。

for文の書き方

for文の基本的な書き方は以下の通りです。

@for 変数 from 開始値 through 終了値 {
  処理;
}
例1
@for $i form 10 through 15 {
  .box#{$i} {
    font-size:#{$i}px;
  }
}

/* 出力結果
.box10 {font-size: 10px;}
.box11 {font-size: 11px;}
.box12 {font-size: 12px;}
.box13 {font-size: 13px;}
.box14 {font-size: 14px;}
.box15 {font-size: 15px;}
*/

変数をセレクタ名やプロパティ名に使う場合は、#{}で囲みます。これをインターポレーションと呼びます。

まとめ

  • 開始値から終了値まで繰り返す
  • 繰り返し回数が決まっている場合に有効
  • 変数をセレクタ名やプロパティ名に使う場合はインターポレーションを用いる

以上がfor文の書き方です。

あなたの毎日がハッピーでありますように。

コメント

  1. […] この記事では、while文を使った繰り返し処理について見ていきます。for文についてはこちらを参照。 […]

タイトルとURLをコピーしました