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

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

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

while文の書き方

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

@while 条件式 {
  処理;
}
例1
$value: 10;
@while $value <= 15 {
  .box#{$value} {
    font-size:#{$value}px;
  }
$value: $value + 1;
}

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

まとめ

  • 条件式が真である限り処理を繰り返す
  • 繰り返し回数が決まっていない場合に使用
  • 増減式を忘れずに

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

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

コメント

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