【Sass】@whileメモ

@while

条件が真(True)である間 { ... }を繰り返す。

やりたいこと

h1〜h6までのfont-sizeを一気に設定したい。

1. $iで数値設定
2. <7で6までと指定 (<=6でも6まで指定とイコール)
3. h#{$i}でh + $iを指定
4. font-size設定
   1.#{}で計算式+文字を括る
   2.()で計算。計算式に *$iを含める。
   3.""で文字は括る。+ "rem"
5. hの後ろが+1づつになるよう$i+1とする。

Sass

$i: 1;
@while $i < 7 {
  h#{$i} { font-size: #{(1.9 - 0.2 * $i) + "rem"}; }
  $i: $i + 1;
}

CSS

h1 {
  font-size: 1.7rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.3rem;
}

h4 {
  font-size: 1.1rem;
}

h5 {
  font-size: 0.9rem;
}

h6 {
  font-size: 0.7rem;
}

小さくなりすぎるので-0.1でもいいかもしれない。