@for

2024 5/24

2024.01.29 2024.05.24

@ifは、指定した回数だけ繰り返し処理を行います。

@for

記法

//　終了の数値一つ前まで
@for　$i　from　開始の数値　to　終了の数値 {
　結果
}
=================================
//　終了の数値まで
@for　$i　from　開始の数値　through　終了の数値 {
　結果
}

<!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>@for</title>
  </head>

  <body>
    <p>終了の数値一つ前まで</p>
    <div class="to1">to1</div>
    <div class="to2">to2</div>
    <div class="to3">to3</div>
    <div class="to4">to4</div>
    <div class="to5">to5</div>
    <hr />
    <p>終了の数値まで</p>
    <div class="through1">through1</div>
    <div class="through2">through2</div>
    <div class="through3">through3</div>
    <div class="through4">through4</div>
    <div class="through5">through5</div>
  </body>
</html>

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

Sass

@for $i from 1 to 5 {
  .to#{$i} {
    width: 20% * $i;
    background-color: #bfdd9e;
  }
}

@for $j from 1 through 5 {
  .through#{$j} {
    width: 20% * $j;
    background-color: #56c1db;
  }
}

css

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

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

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

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

.through1 {
  width: 20%;
  background-color: #56c1db;
}

.through2 {
  width: 40%;
  background-color: #56c1db;
}

.through3 {
  width: 60%;
  background-color: #56c1db;
}

.through4 {
  width: 80%;
  background-color: #56c1db;
}

.through5 {
  width: 100%;
  background-color: #56c1db;
}

出力結果

終了の数値一つ前まで

to1

to2

to3

to4

to5

終了の数値まで

through1

through2

through3

through4

through5

@if
@while