この記事を書いた経緯
- Sass の勉強をしていたら、教材の通りに記述すると最新環境だと警告文が多発
- 警告文
Deprecation Warning ... is deprecated and will be removed in Dart Sass 2.0.0.
- 警告文
- 原因が Dart Sass の安定板（2019 ～）による、組み込み関数の大刷新の影響と判明
- 毎回調査も大変なので公式ドキュメントが読みにくかったので自分用に整理
- ※メインの学習対象はTypeScript × Reactでの開発（SassはCSS周りのために回り道学習）
公式ドキュメント
作業環境
- 仮想環境 (Ubuntu-24.04)
- node.js : v22.14.0
- npm : 10.9.2
- sass : v1.93.2
- gulp : v5.0.1 （タスクランナー）
- gulp-plumber : v1.2.1 （エラーハンドリング）
- gulp-sass : v6.0.1 （Gulp と Sass を連携）
Sass 組み込み関数モジュール別対比表（使用例付き）
● math モジュール
ファイル開始時に @use "sass:math"; で読み込んでから使用
| 旧グローバル関数：非推奨 | モジュール関数：推奨 | 役割の概要 | 使用例（SCSS） |
|---|---|---|---|
abs() |
math.abs() |
絶対値を取得 | $val: math.abs(-10px); |
round() |
math.round() |
四捨五入 | $val: math.round(1.6); |
ceil() |
math.ceil() |
切り上げ | $val: math.ceil(1.6); |
floor() |
math.floor() |
切り捨て | $val: math.floor(1.6); |
div() (特になし) |
math.div() |
/ 記号による除算の代替 |
$val: math.div(100px, 3); |
max() |
math.max($numbers...) |
渡された数値の中から最大値を取得する。 | $val: math.max(10, 50, 20); |
min() |
math.min($numbers...) |
渡された数値の中から最小値を取得する。 | $val: math.min(10, 5, 20); |
percentage() |
math.percentage($number) |
数値をパーセンテージ（%）に変換する。 | $val: math.percentage(0.25); |
random() |
math.random($limit: null) |
0 から 1 の範囲で乱数を生成する。$limit指定で整数を返す。 |
$val: math.random(10); // 1〜10の整数 |
| (特になし) | math.log($number, $base: null) |
自然対数（$base: e）または指定した底（$base）の対数を返す。 |
$val: math.log(10); |
| (特になし) | math.pow($base, $exponent) |
べき乗を計算する（$baseの$exponent 乗）。 | $val: math.pow(2, 3); // 8 |
| (特になし) | math.sqrt($number) |
数値の平方根を取得する。 | $val: math.sqrt(9); // 3 |
| (特になし) | math.sin($angle) |
角度のサイン（正弦）を返す。 | $val: math.sin(90deg); |
| (特になし) | math.cos($angle) |
角度のコサイン（余弦）を返す。 | $val: math.cos(0deg); |
| (特になし) | math.tan($angle) |
角度のタンジェント（正接）を返す。 | $val: math.tan(45deg); |
| (特になし) | math.pi() |
数学定数**π（パイ）**の値（3.14159...）を返す。 | $val: math.pi(); |
| (特になし) | math.e() |
数学定数**e（自然対数の底）**の値（2.71828...）を返す。 | $val: math.e(); |
● color モジュール
ファイル開始時に @use "sass:color"; で読み込んでから使用
| 旧グローバル関数：非推奨 | モジュール関数：推奨 | 役割の概要 | 使用例（SCSS） | 備考 |
|---|---|---|---|---|
lighten() |
color.adjust() |
明度を相対的に上げる | $new: color.adjust(#333, $lightness: 20%); |
lighten の代替 |
darken() |
color.adjust() |
明度を相対的に下げる | $new: color.adjust(#333, $lightness: -20%); |
darken の代替 下げる割合を負の数で指定 |
saturate() |
color.adjust() |
彩度を相対的に上げる | $new: color.adjust(#333, $saturation: 10%); |
saturate の代替 |
desaturate() |
color.adjust() |
彩度を相対的に下げる | $new: color.adjust(#333, $saturation: -10%); |
desaturate の代替 下げる割合を負の数で指定 |
opacify() |
color.adjust() |
透明度（Alpha）を相対的に上げる | $new: color.adjust(rgba(0,0,0,0.5), $alpha: 0.1); |
opacify の代替 |
transparentize() |
color.adjust() |
透明度（Alpha）を相対的に下げる | $new: color.adjust(rgba(0,0,0,0.5), $alpha: -0.1); |
transparentize の代替 下げる割合を負の数で指定 |
set-color() |
color.change() |
HSL/RGB/Alpha の値を絶対値で置き換える | $new: color.change(#f00, $dodgerblue: 100, $alpha: 0.5); |
|
adjust-hue() |
color.adjust($color, $hue) |
色相を相対的に調整する。 | $new: color.adjust(#f00, $hue: 30deg); |
|
mix() |
color.mix($color1, $color2, $weight: 50%) |
2色を特定の割合で混ぜる。 | $new: color.mix(#f00, #00f, 25%); |
|
grayscale() |
color.grayscale($color) |
色をグレースケール（彩度 0%）に変換する。 | $new: color.grayscale(#f00); |
|
complement() |
color.complement($color) |
補色（色相を 180 度回転）を取得する。 | $new: color.complement(#f00); |
|
invert() |
color.invert($color, $weight: 100%) |
色を反転させる。 | $new: color.invert(#333); |
|
| (特になし) | color.red($color) |
色の赤（Red）成分を取得する。 | $val: color.red(#f08); |
|
| (特になし) | color.green($color) |
色の緑（Green）成分を取得する。 | $val: color.green(#f08); |
|
| (特になし) | color.blue($color) |
色の青（Blue）成分を取得する。 | $val: color.blue(#f08); |
|
| (特になし) | color.hue($color) |
色の色相（Hue）成分を取得する。 | $val: color.hue(#f08); |
|
| (特になし) | color.saturation($color) |
色の彩度（Saturation）成分を取得する。 | $val: color.saturation(#f08); |
|
| (特になし) | color.lightness($color) |
色の明度（Lightness）成分を取得する。 | $val: color.lightness(#f08); |
|
| (特になし) | color.alpha($color) |
色の透明度（Alpha）成分を取得する。 | $val: color.alpha(rgba(0,0,0,0.5)); |
|
| (特になし) | color.is-opaque($color) |
色が不透明（alpha=1）か判定する。 | $bool: color.is-opaque(#000); |
|
| (特になし) | color.is-transparent($color) |
色が透明（alpha=0）か判定する。 | $bool: color.is-transparent(rgba(0,0,0,0)); |
● string モジュール
ファイル開始時に @use "sass:string"; で読み込んでから使用
| 旧グローバル関数：非推奨 | モジュール関数：推奨 | 役割の概要 | 使用例（SCSS） |
|---|---|---|---|
unquote() |
string.unquote() |
文字列からクォートを削除 | $val: string.unquote('"Hello"'); |
quote() |
string.quote() |
文字列にクォートを追加 | $val: string.quote(Hello); |
str-length() |
string.length() |
文字列の長さを取得 | $len: string.length("sass"); |
str-insert() |
string.insert($string, $insert, $index) |
文字列の指定位置に別の文字列を挿入する。 | $new: string.insert("a c", "b", 2); // "a b c" |
str-slice() |
string.slice($string, $start-at, $end-at: -1) |
文字列の一部を抽出する。 | $sub: string.slice("Hello", 2, 4); // "ell" |
to-upper-case() |
string.to-upper-case($string) |
文字列を大文字に変換する。 | $up: string.to-upper-case("sass"); // "SASS" |
to-lower-case() |
string.to-lower-case($string) |
文字列を小文字に変換する。 | $low: string.to-lower-case("SASS"); // "sass" |
index() |
string.index($string, $substring) |
文字列内で部分文字列が最初に見つかったインデックス（位置）を返す。 | $idx: string.index("Hello", "l"); // 3 |
str-index() |
string.find-nth($string, $substring, $nth: 1) |
文字列内で部分文字列が指定回数目に見つかったインデックスを返す。 | $idx: string.find-nth("abab", "b", 2); // 4 |
| (特になし) | string.unique-id() |
CSS で使用できる一意の ID 文字列を生成する。 | $id: string.unique-id(); // uae345k |
● list モジュール
ファイル開始時に @use "sass:list"; で読み込んでから使用
| 旧グローバル関数：非推奨 | モジュール関数：推奨 | 役割の概要 | 使用例（SCSS） |
|---|---|---|---|
length() |
list.length() |
リストの長さを取得 | $len: list.length(10px, 20px, 30px); |
append() |
list.append() |
リストに要素を追加 | $new: list.append(1 2, 3); |
nth() |
list.nth() |
リストの特定の位置の要素を取得 | $val: list.nth(1 2 3, 2); |
join() |
list.join() |
2つのリストを結合 |
$a: (1, 2); $b: (3, 4);$new: list.join($a, $b); // (1, 2, 3, 4)
|
index() |
list.index($list, $value) |
リスト内で値が最初に見つかったインデックス（位置）を返す。 | $idx: list.index(a b c, b); // 2 |
set-nth() |
list.set-nth($list, $n, $value) |
リストの指定した位置の要素を置き換える。 | $new: list.set-nth(1 2 3, 2, 9); // (1, 9, 3) |
is-bracketed() |
list.is-bracketed($list) |
リストが角括弧 [] で囲まれているか判定する。 |
$bool: list.is-bracketed([a, b]); // true |
| (特になし) | list.separator($list) |
リストの区切り文字（スペースまたはコンマ）を返す。 | $sep: list.separator(a, b); // comma |
| (特になし) | list.slash($list) |
リストの区切り文字がスラッシュ / かどうかを返す。 |
$bool: list.slash(a / b); // true |
| (特になし) | list.map($list, $function) |
リストの各要素に関数を適用し、新しいリストを返す。 |
$nums: (1, 2, 3);$new: list.map($nums, math.abs($num));
|
| (特になし) | list.zip($lists...) |
複数のリストを結合し、対応する要素をグループ化する。 |
$l1: (1, 2); $l2: (a, b);$new: list.zip($l1, $l2); // ((1 a), (2 b))
|
● map モジュール
ファイル開始時に @use "sass:map"; で読み込んでから使用
| 旧グローバル関数：非推奨 | モジュール関数：推奨 | 役割の概要 | 使用例（SCSS） |
|---|---|---|---|
map-get() |
map.get() |
マップから値を取得 |
$map: (a: 1, b: 2);$val: map.get($map, a);
|
map-merge() |
map.merge() |
マップを結合 |
$map1: (a: 1); $map2: (b: 2);$new: map.merge($map1, $map2);
|
map-has-key() |
map.has-key($map, $key) |
マップに指定したキーが存在するか判定する。 |
$m: (a: 1);$bool: map.has-key($m, a);
|
map-keys() |
map.keys($map) |
マップのすべてのキーをリストとして取得する。 |
$m: (a: 1, b: 2);$keys: map.keys($m); // (a, b)
|
map-values() |
map.values($map) |
マップのすべての値をリストとして取得する。 |
$m: (a: 1, b: 2);$vals: map.values($m); // (1, 2)
|
map-remove() |
map.remove($map, $keys...) |
マップから指定したキーと値のペアを削除する。 |
$m: (a: 1, b: 2);$new: map.remove($m, a); // (b: 2)
|
| (特になし) | map.deep-merge($map1, $map2) |
ネストされたマップを再帰的に結合する。 |
$m1: (a: (x: 1)); $m2: (a: (y: 2));$new: map.deep-merge($m1, $m2); // (a: (x: 1, y: 2))
|
| (特になし) | map.set($map, $key, $value) |
マップの指定したキーの値を設定（追加・更新）する。 |
$m: (a: 1);$new: map.set($m, b, 2); // (a: 1, b: 2)
|
| (特になし) | map.deep-set($map, $keys, $value) |
ネストされたマップのキーの値を設定（追加・更新）する。 |
$m: (a: (b: 1));$new: map.deep-set($m, (a, b), 5); // (a: (b: 5))
|
● selector モジュール
ファイル開始時に @use "sass:selector"; で読み込んでから使用
| 旧グローバル関数：非推奨 | モジュール関数：推奨 | 役割の概要 | 使用例（SCSS） |
|---|---|---|---|
selector-append() |
selector.append() |
セレクタを結合 | $sel: selector.append(".a", ".b"); // .a.b |
selector-nest() |
selector.nest() |
セレクタをネスト | $sel: selector.nest(".a", ".b"); // .a .b |
selector-extend() |
selector.extend($selector, $extendee, $extender) |
セレクタを拡張する（@extend に相当）。 |
$ext: selector.extend(".foo", ".bar", ".baz"); |
selector-unify() |
selector.unify($selector1, $selector2) |
2 つのセレクタが結合可能か確認し、可能な場合は結合する。 | $new: selector.unify("a", ".b"); // a.b |
selector-replace() |
selector.replace($selector, $original, $replacement) |
セレクタ内の特定のサブセレクタを置換する。 | $new: selector.replace(".a .b", ".b", ".c"); // .a .c |
selector-unify() |
selector.simple-selectors($selector) |
複合セレクタを構成するシンプルなセレクタのリストを返す。 | $list: selector.simple-selectors("a.b#c"); // (a, .b, #c) |
selector-to-string() |
selector.to-string($selector) |
セレクタのリストを CSS で使える文字列に変換する。 | $str: selector.to-string(".a, .b"); // ".a, .b" |
is-superselector() |
selector.superselector($selector1, $selector2) |
$selector1が$selector2のスーパーセレクタ（包含するセレクタ）であるか判定する。 |
$bool: selector.superselector(".a", ".a.b"); // true |
| (特になし) | selector.parse($selector) |
文字列を Sass が扱えるセレクタ構造にパースする。 | $parsed: selector.parse(".foo"); |
● meta モジュール
ファイル開始時に @use "sass:meta"; で読み込んでから使用
| 旧グローバル関数：非推奨 | モジュール関数：推奨 | 役割の概要 | 使用例（SCSS） |
|---|---|---|---|
variable-exists() |
meta.variable-exists($name, $scope: local) |
変数が存在するか判定する。$scopeでローカル/グローバルを指定。 |
$bool: meta.variable-exists(my-var); |
mixin-exists() |
meta.mixin-exists($name, $module: null) |
ミックスインが定義されているか判定する。 | $bool: meta.mixin-exists(my-mixin); |
function-exists() |
meta.function-exists($name, $module: null) |
関数が定義されているか判定する。 | $bool: meta.function-exists(my-func); |
content-exists() |
meta.content-exists() |
ミックスインの呼び出し時に @content ブロックが渡されたか判定する。 |
@if meta.content-exists() { ... } |
type-of() |
meta.type-of($value) |
値の型（number, string, list など）を返す。 |
$type: meta.type-of(10px); // number |
global-variable-exists() |
meta.global-variable-exists($name) |
変数がグローバルスコープに存在するか判定する。 | $bool: meta.global-variable-exists(global-var); |
get-function() |
meta.get-function($name, $module: null) |
関数を値として取得する。 | $func: meta.get-function(round); |
call() |
meta.call($function, $args...) |
取得した関数を引数付きで実行する。 | $result: meta.call(meta.get-function(abs), -5); |
module-exists() |
meta.module-exists($name) |
@use で読み込まれたモジュールが存在するか判定する。 |
$bool: meta.module-exists(my-mod); |
module-variables() |
meta.module-variables($module) |
モジュール内で定義された変数のマップを返す。 | $vars: meta.module-variables(my-mod); |
module-functions() |
meta.module-functions($module) |
モジュール内で定義された関数のマップを返す。 | $funcs: meta.module-functions(my-mod); |
| (特になし) | meta.keywords($args) |
ミックスインや関数に渡されたキーワード引数のマップを返す。 | $keys: meta.keywords($args...); |
| (特になし) | meta.load-css($url, $with: null) |
動的に CSS モジュールを読み込む（@use に相当）。 |
@include meta.load-css("layout"); |
| (特になし) | meta.inspect($value) |
Sass の値をデバッグしやすい文字列に変換する。 | $str: meta.inspect((1, 2)); // (1, 2) |
その他
列挙できていない関数があれば、ご存じの方はコメントにて教えていただけますと幸いです。
確認次第追加したいと思っています。
2025/10/06追記：公式ドキュメントからデータをまとめたので記載漏れはかなり減ったと思います。
更新履歴
- 2025/10/06: Sass公式ドキュメントに記載分追加
- 2025/10/05: listモジュールに
join()追加 - 2025/10/05: 初版投稿