【SCSS】数値が入った変数にパーセントをくっつける

1. 数値が入った変数に%を結合させる
2. 活用例：○%を量産する

数値が入った変数に%を結合させる

#

やりたいことは、$foo: 10;のとき、$foo を使ってwidth: 10%;と書きたい。
結論としては 2 通りの方法がある。

$foo * 1% で計算

#

以下の例だと、10 * 1% → 10%のように計算してくれる。

$foo: 10;
.test {
  width: $foo * 1%; // width: 10%; になる
}

percentage()関数を使う

#

Sass にはpercentage()という関数が用意されています。
引数には 0~1 の値を入れるとパーセントにしてくれる便利関数。
※公式ドキュメント{:target="_blank"}には以下のように書いてありました。

💡 Fun fact:
This function is identical to $number * 100%.

percentage()と$number * 100%どっちも使えるよってことですね。

$foo: .1;
.test {
    width: percentage($foo);    // width: 10%; になる
}

活用例：○%を量産する

#

@forとpercentage()を利用すれば、width の値が 10%~100%のセレクタを作れます。

@for $i from 1 through 10 {
  $w: $i * 10;
  .w-#{$w} {
    width: $w * 1%;
  }
}

これを css にコンパイルすると以下のように10% ~ 100%までの width を作ってくれます。

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}
/* 省略... */
.w-100 {
  width: 100%;
}