【Sass】小数点以下を切り上げ・切り捨てる方法｜math.ceil/floorと桁数指定

Sassでレイアウトを計算するとき、小数点以下を切り上げたり切り捨てたりしたい場面があります。Sassには ceil()（切り上げ）と floor()（切り捨て）がありますが、現在のDart Sassではグローバル版は非推奨で、math.ceil() / math.floor() を使うのが正しい書き方です。この記事では、正しい使い方と負の数での挙動、桁数指定の方法までまとめます。

切り上げ（math.ceil）と切り捨て（math.floor）

math.ceil() は小数点以下を切り上げて整数にし、math.floor() は切り捨てて整数にします。先頭で sass:math モジュールを読み込んでおきます。

@use "sass:math";

.up   { width: math.ceil(3.2); }  // 4（切り上げ）
.down { width: math.floor(3.8); } // 3（切り捨て）

負の数での挙動に注意

切り上げ・切り捨ては「数直線上で大きい方／小さい方の整数へ動かす」操作です。そのため負の数では直感とずれることがあります。

@use "sass:math";

.a { x: math.ceil(-3.2); }  // -3（大きい方へ → 0に近づく）
.b { x: math.floor(-3.2); } // -4（小さい方へ → 0から離れる）

小数第N位で切り上げ・切り捨てる

math.ceil() / math.floor() は整数にしか丸められません。「小数第2位まで残して切り上げ」のように桁を指定したい場合は、10のべき乗を掛けて丸め、割って戻すカスタム関数を用意します。

@use "sass:math";

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

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

.a { x: ceil-to(3.14159, 2); }  // 3.15
.b { x: floor-to(3.14159, 2); } // 3.14

round・ceil・floorの違い

よくある質問（FAQ）

まとめ

Sassで小数点以下を切り上げ・切り捨てるポイントを整理します。

• 切り上げは math.ceil()、切り捨ては math.floor()
• グローバル ceil() / floor() は非推奨（Dart Sass 3.0で削除予定）
• 負の数では floor(-3.2)=-4 のように0から離れる方向に動く
• 桁数指定は math.pow ＋ math.div のカスタム関数で
• 四捨五入は math.round()。用途で使い分ける

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