Sassでは数値を四捨五入できますが、「round($value, 1) で小数第1位に丸まる」と思い込んでいると、想定外の結果になります。最新のDart Sassでは round() の第2引数は「丸める桁数」ではなく「丸める間隔」だからです。この記事では、整数への丸めから小数点以下の桁数指定まで、実際にコンパイルして確認した結果とあわせて正しい方法を解説します。
この記事の結論：整数に丸めるなら
math.round($value)。小数点以下の桁数を指定したいなら、math.pow と math.div を使ったカスタム関数を用意するのが確実です。round($value, 1) は「小数第1位」ではなく「1刻みで丸める」＝整数に丸まる点に注意します。整数に四捨五入する（math.round）
最も基本的な整数への丸めには math.round() を使います。最初に @use "sass:math"; を読み込んでおきます。小数第1位が5以上なら切り上げ、4以下なら切り捨てになります。
整数への四捨五入
@use "sass:math"; $value: 3.7; $rounded: math.round($value); // => 4 $value2: 3.4; $rounded2: math.round($value2); // => 3
昔ながらの
round($value)（モジュール無しのグローバル関数）でも整数への丸めは同じ結果になりますが、現在のSassではsass:math モジュールの math.round() の使用が推奨されています。新しく書くなら math.round() を使いましょう。よくある誤解：round($value, 1) は「小数第1位」ではない
「round($value, 1) と書けば小数第1位に四捨五入できる」という解説を見かけますが、これは誤りです。最新のDart Sassでは round() はCSSの round() 関数として扱われ、第2引数は「丸める間隔（ステップ）」を意味します。
NG: 桁数のつもりが「1刻み」で丸まる
// 小数第1位に丸めたつもり…
.box { width: round(3.76, 1); } // => 4 （1刻みなので整数に丸まる）
// 小数第1位に丸めたいなら間隔は 0.1 を指定する
.box { width: round(3.76, 0.1); } // => 3.8 （正しい）
.box { width: round(3.14159, 0.01); } // => 3.14
round(3.76, 1) の結果は 3.8 ではなく 4 です。第2引数は「小数点以下の桁数」ではなく「丸める間隔」です。小数第1位で丸めたいなら間隔に 0.1、第2位なら 0.01 を指定します。なお math.round() は引数を1つしか受け取れず、2つ渡すとコンパイルエラーになります。小数点以下の桁数を指定して四捨五入する
「小数第2位まで残す」のように桁数で指定したい場合は、math.pow（べき乗）と math.div（割り算）を使ったカスタム関数を用意するのが定番で、バージョンに左右されず確実です。
桁数を指定できる四捨五入関数
@use "sass:math";
@function round-to($value, $digits: 0) {
$factor: math.pow(10, $digits);
@return math.div(math.round($value * $factor), $factor);
}
.a { width: round-to(3.76, 1); } // => 3.8
.b { width: round-to(3.14159, 2); } // => 3.14
.c { width: round-to(3.7); } // => 4（桁数省略=整数）
.d { width: round-to(12.345px, 1); } // => 12.3px（単位もそのまま）
この
round-to() は、「値を10のn乗倍 → 整数に丸める → 10のn乗で割って戻す」という古典的な四捨五入の手法です。px などの単位が付いた値にもそのまま使えます。切り上げ・切り捨ての方向を指定する
「常に切り上げ」「常に切り捨て」のように方向を固定したい場合は、CSSの round() に丸め方向（strategy）を渡せます。up（切り上げ）・down（切り捨て）・nearest（四捨五入）・to-zero（ゼロ方向）が指定できます。
丸め方向を指定する
.up { width: round(up, 3.2, 1); } // => 4（切り上げ）
.down { width: round(down, 3.8, 1); } // => 3（切り捨て）
.near { width: round(nearest, 3.5, 1); } // => 4（四捨五入）
小数点以下を丸める専用の方法は【Sass】小数点以下を切り上げ・切り捨てる方法、桁数を揃える関数の作り方は【Sass】数値の桁数を揃えるカスタム関数の作成方法で詳しく解説しています。
よくある質問（FAQ）
Qround($value, 1) で小数第1位に四捨五入できますか？
Aできません。第2引数は「桁数」ではなく「丸める間隔」です。
round(3.76, 1) は1刻みで丸める＝結果は 4 になります。小数第1位で丸めたいなら間隔に 0.1 を指定するか、桁数を渡せるカスタム関数を使ってください。Qround() と math.round() はどちらを使うべきですか？
A整数への丸めには
math.round() を使うのが推奨です。グローバルの round() でも整数丸めはできますが、現在は sass:math モジュール側へ移行が進んでいます。ただし丸め方向（up/down）の指定はCSSの round() 側にあります。Qmath.round() に桁数を渡したらエラーになりました。
A
math.round() は引数を1つしか取りません。桁数を指定して丸めたい場合は、本文の round-to() のようなカスタム関数（math.pow と math.div を使う）を用意してください。Qpx付きの値も四捨五入できますか？
Aできます。
math.round(3.76px) や本文の round-to(12.345px, 1) のように、単位が付いたままでも丸められ、結果にも単位が保持されます。単位を外したい場合は数値から単位を除去する方法を参照してください。まとめ
Sassの四捨五入のポイントを整理します。
- 整数への丸めは
math.round($value)（@use "sass:math"が必要） round($value, 1)は小数第1位ではなく「1刻み」＝整数に丸まる- 小数第1位なら
round($value, 0.1)、または桁数を渡せるカスタム関数を使う - 桁数指定は
math.pow＋math.divのround-to()が確実 - 切り上げ・切り捨ては
round(up, ...)/round(down, ...)で方向指定できる
関連として、小数点以下の切り上げ・切り捨て・数値の絶対値を取得する方法・数値から単位を除去する方法もあわせて読むと、Sassの数値処理に強くなれます。
