@while

2024 5/24

2024.01.30 2024.05.24

@whileは、該当するまで繰り返しを行います。
※カウント数は可変できる

@while

記法

@while　条件 {
　処理
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="cssのリンク先" />
    <title>@while</title>
  </head>

  <body>
    <div class="while1">while1</div>
    <div class="while2">while2</div>
    <div class="while3">while3</div>
    <div class="while4">while4</div>
    <div class="while5">while5</div>
  </body>
</html>

以下のcssとscssは同一デザイン記述になります

Sass

$i: 20;
$j: 1;
@while $i <= 100 {
  .while#{$j} {
    width: 1% * $i;
    background-color: #bfdd9e;
  }
  $i: $i + 20;
  $j: $j + 1;
}

css

.while1 {
  width: 20%;
  background-color: #bfdd9e;
}

.while2 {
  width: 40%;
  background-color: #bfdd9e;
}

.while3 {
  width: 60%;
  background-color: #bfdd9e;
}

.while4 {
  width: 80%;
  background-color: #bfdd9e;
}

.while5 {
  width: 100%;
  background-color: #bfdd9e;
}

出力結果

while1

while2

while3

while4

while5

@for
@each