Sassでスタイルを組んでいると、マージンの差分計算などで数値の絶対値（符号を取り除いた値）がほしくなることがあります。Sassには絶対値を返す関数が用意されていますが、現在のDart Sassでは math.abs() を使うのが推奨です。この記事では正しい使い方と、グローバルの abs() との違い、パーセント単位での注意点までまとめます。
この記事の結論：絶対値は
math.abs($number) で取得します。先頭で @use "sass:math"; を読み込んでおきます。px などの単位はそのまま保持されます。math.abs()で絶対値を取得する（推奨）
math.abs() は与えた数値の絶対値を返します。負の数は正に、正の数はそのまま返ります。単位が付いていてもその単位を保ったまま絶対値になります。
math.abs()の基本
@use "sass:math";
$number: -10;
.box {
z-index: math.abs($number); // 10
}
.gap {
margin-left: math.abs(-20px); // 20px（単位はそのまま）
}
グローバルのabs()との違い
モジュールを読み込まずに使えるグローバルの abs() もあり、プレーンな数値や px では今のところ同じ結果になります。ただしパーセント単位を渡すと非推奨の警告が出ます。将来はブラウザが解決するCSSの abs() 関数として出力されるよう変わる予定のためです。
%は math.abs() を使う
// NG: グローバル abs() に % を渡すと deprecation 警告（abs-percent）
.a { width: abs(-10%); } // 警告: Passing percentage units to the global abs() is deprecated
// OK: math.abs() なら警告なし
@use "sass:math";
.b { width: math.abs(-10%); } // 10%
絶対値は
math.abs() に統一するのが安全です。グローバル abs() はパーセントで挙動が変わる予定があり、将来の挙動差を避けるためにも sass:math モジュールの math.abs() を使いましょう。実用例：差分から正の値を得る
2つの値の差を計算すると、引く順番によって符号がマイナスになることがあります。math.abs() で符号を気にせず「距離」や「差の大きさ」を得られます。割り算には math.div() を使う点もあわせて押さえておきましょう。
差の絶対値を使う
@use "sass:math";
$a: 30px;
$b: 50px;
.diff {
// 順番に関係なく差の大きさ（20px）が得られる
width: math.abs($a - $b); // 20px
}
よくある質問（FAQ）
Qabs()とmath.abs()はどちらを使うべきですか？
A
math.abs() を推奨します。プレーンな数値ではグローバル abs() でも同じ結果ですが、パーセント単位では abs() が非推奨になっており、将来の挙動が変わる予定です。@use "sass:math"; を読み込んで math.abs() を使えば安全です。Qpx付きの値でも絶対値を取れますか？
Qmath.abs()を使うと「Undefined function」エラーになります。
A先頭で
@use "sass:math"; を読み込んでいない可能性があります。モジュールを読み込んでから math.abs() を使ってください。Q2つの値の差を必ず正の数で得たいです。
A
math.abs($a - $b) を使います。引く順番に関係なく差の大きさが得られるため、距離やサイズ差の計算に便利です。まとめ
Sassで絶対値を取得するポイントを整理します。
- 絶対値は
math.abs($number)（@use "sass:math"が必要） pxなどの単位は保持される- グローバル
abs()はパーセントで非推奨警告が出る - 将来の挙動差を避けるため
math.abs()に統一するのが安全 - 差の大きさは
math.abs($a - $b)で順番を気にせず取得できる
関連として、round()で四捨五入・切り上げ・切り捨て・数値から単位を除去もあわせて読むと、Sassの数値処理に強くなれます。
