【Sass】数値をパーセンテージに変換する方法｜math.percentageと比率からの%計算

2024.07.02

レスポンシブなレイアウトでは、固定値ではなくパーセンテージ（%）で幅を指定する場面が多くあります。Sassでは 0.5 のような数値を 50% に変換できますが、組み込みの math.percentage() を使うのが簡潔でおすすめです。この記事では基本の変換から、グリッドの列幅を比率から求める実用テクニックまで解説します。

この記事の結論：数値→% は math.percentage($number) が簡潔です（math.percentage(0.5) → 50%）。グリッドの列幅などは比率からmath.percentage(math.div($col, $total)) で求められます。引数は単位なしの数値である必要があります。
スポンサーリンク

math.percentage()で変換する（推奨）

Sassには数値を%に変換する組み込み関数 math.percentage() があります。@use "sass:math"; を読み込んで使います。0.5 を渡すと 50% が返ります（内部的に100倍されます）。

math.percentageの基本
@use "sass:math";

.box {
  width: math.percentage(0.5);  // 50%
  height: math.percentage(0.25); // 25%
}
グローバルの percentage() は非推奨です。モジュールを使わず percentage(0.5) と書くと、「Global built-in functions are deprecated（Dart Sass 3.0で削除予定）」の警告が出ます。@use "sass:math"; を読み込んで math.percentage() を使ってください。

比率からパーセンテージを求める（グリッド列幅）

最もよく使うのがこの場面です。「全体960pxのうち640px分の幅を%で指定したい」のように、割合（比率）から%を求めるには math.div() と組み合わせます。

比率 → % （列幅の計算）
@use "sass:math";

// 12カラム中、7カラム分の幅を % で
.col-7 {
  width: math.percentage(math.div(7, 12)); // 58.3333333333%
}

// ピクセルの比率から（単位は割り算で打ち消される）
.main {
  width: math.percentage(math.div(640px, 960px)); // 66.6666666667%
}
割り算に / を使うのは非推奨です。必ず math.div() を使います。詳しくはpxからremへ変換する方法（math.div の解説）を参照してください。

手動で計算する場合（* 100%）

math.percentage() を使わず、単位なしの数値に 100% を掛ける方法でも変換できます。結果は同じですが、意図が伝わりやすい math.percentage() のほうがおすすめです。

* 100% で変換
$number: 0.5;
.box { width: $number * 100%; } // 50%
引数・対象は単位なしの数値にします。math.percentage(10px) のように単位付きの値を渡すとエラーになります。単位が付いている場合は先に外してください（数値から単位を除去する方法）。

桁が長い%を丸めたい場合

比率から計算すると 58.3333333333% のように桁が長くなることがあります。見た目を整えたいときは丸め処理と組み合わせます。

%を小数第2位で丸める
@use "sass:math";

@function round-to($value, $digits: 0) {
  $factor: math.pow(10, $digits);
  @return math.div(math.round($value * $factor), $factor);
}

.col {
  width: round-to(math.percentage(math.div(7, 12)), 2); // 58.33%
}
四捨五入の詳細はround()で四捨五入する方法、切り上げ・切り捨ては小数点以下を切り上げ・切り捨てる方法を参照してください。

よくある質問（FAQ）

Q0.5を50%にする一番簡単な方法は？
Amath.percentage(0.5) です（@use "sass:math"; が必要）。0.5 * 100% でも同じ結果になりますが、組み込み関数のほうが意図が明確です。
Qグリッドの列幅を%で出したいです。
A比率を math.div() で作り、math.percentage() に渡します。例: math.percentage(math.div(7, 12)) で12カラム中7カラム分の幅（約58.33%）が得られます。
Qpercentage(10px)がエラーになります。
Amath.percentage() は単位なしの数値を受け取ります。px付きの値はそのまま渡せません。比率にするか、単位を除去してから渡してください。
Q結果の小数が長くなります。
Amath.round() やカスタムの丸め関数で桁を整えます。本文の round-to() のように組み合わせると、58.33% のように丸められます。

まとめ

Sassで数値を%に変換するポイントを整理します。

  • 変換は math.percentage($number)（@use "sass:math" が必要）
  • 比率からは math.percentage(math.div($col, $total))
  • 引数は単位なしの数値（px付きはエラー）
  • グローバル percentage() は非推奨
  • 桁が長い%は math.round() 等で丸める

関連として、pxからremへ変換・数値から単位を除去・round()で四捨五入もあわせて読むと、Sassの数値処理に強くなれます。