Sass不要の時代へ？ CSS標準で独自関数が作れる「CSS Functions and Mixins Module」を解説｜ブログ

Webフロントエンド開発において、長年「関数」や「Mixin」といった再利用可能な仕組みはSassのが得意とした分野でした。 しかし近年、CSS仕様として策定が進められている CSS Functions and Mixins Module によって、プレーンなCSSだけで独自関数を定義できるようになっています。 これにより、 Sassの@function 複雑なcalc() JavaScriptによるスタイル計算 といった仕組みの一部を、ネイティブCSSだけで実現できる可能性が見えてきました。 今回は、この新しいCSSカスタム関数について解説します。 --- CSSで独自関数を作る時代がやってきた これまでCSSには、開発者が独自の関数を作る仕組みが存在しませんでした。 例えばSassでは以下のような関数が作れます。 @function double($value) { @return $value 2; } .card { padding: double(12px); } 一方、標準CSSではこのような処理は不可能でした。 そこで登場したのが CSS Functions and Mixins Module です。 この仕様では、新しいアットルール @function を利用してCSS独自の関数を定義できます。 --- 関数の登録方法 関数は @function を使って定義します。 @function --double(--value) { result: calc(var(--value) 2); } ポイントは以下の通りです。 関数名は -- から始める 引数もCSS変数と同様の記法 result 記述子で戻り値を指定する --- 関数の呼び出し方法 登録した関数は通常のCSSプロパティ内で利用できます。 .card { --base-space: 12px; padding: --double(var(--base-space)); } 計算結果は以下になります。 padding: 24px; CSS変数を使う感覚で関数を呼び出せるため、非常に直感的です。 --- 実践例①：デザインシステムの余白管理 UI開発では余白のルールを統一するケースが多くあります。 例えば「4px単位でスペーシングを管理する」場合、 @function --space(--multiplier) { result: calc(var(--multiplier) 4px); } 利用例： .card { padding: --space(4); } .button { padding: --space(2); } 結果： .card { padding: 16px; } .button { padding: 8px; } デザインシステムのトークン管理がさらにシンプルになります。 --- 実践例②：レスポンシブな関数 CSSカスタム関数の面白い点は、関数内部に条件分岐を持たせられることです。 例えば画面幅によって値を変更する関数を定義できます。 @function --responsive-font() { result: 16px; @media (width > 1000px) { result: 20px; } } 利用側は非常にシンプルです。 .title { font-size: --responsive-font(); } 画面サイズに応じて関数の戻り値が変化します。 従来なら複数箇所にメディアクエリを書く必要がありましたが、ロジックを1か所へ集約できます。 --- カスタム関数の主な特徴 デフォルト値を設定できる 引数にはデフォルト値を指定できます。 @function --space( --multiplier: 2 ) { result: calc(var(--multiplier) 8px); } 呼び出し側： padding: --space(); 引数未指定時は 2 が使用されます。 --- 型を指定できる 将来的な仕様では引数や戻り値の型指定にも対応しています。 @function --double( --value ) returns { result: calc(var(--value) 2); } これにより誤った値の利用を防ぎやすくなります。 --- JavaScript不要の計算が増える これまでJavaScriptで行っていた以下のような処理をCSSへ移行できる可能性があります。 動的な余白計算 レスポンシブサイズ計算 テーマカラー生成 デザインシステム管理 レイアウト値の共通化 CSSだけで完結するため、保守性向上やパフォーマンス改善も期待できます。 --- Sassは不要になるのか？ 結論から言うと、まだ完全には置き換わりません。 ただし、 CSS変数 CSS Nesting color-mix() if() CSS Custom Functions などの登場により、Sassを導入する理由は確実に減ってきています。 実際、近年のCSSは「プリプロセッサでできたことを標準機能として取り込む」流れが続いています。 そのため将来的には、 「プロジェクトによってはSass不要」 というケースも珍しくなくなるかもしれません。 --- 現在のブラウザ対応状況 注意したいのは、この機能がまだ比較的新しい仕様である点です。 現在はChromium系ブラウザを中心に実装や実験的サポートが進んでいます。一方でFirefoxやSafariではサポート状況に差があり、Web標準の普及指標であるBaselineにも未対応の機能として扱われています。 そのため現時点では、 一般公開サイト 商用サービス 幅広いブラウザサポートが必要な案件 への導入は慎重に検討する必要があります。 まずは以下の用途で試すのがおすすめです。 社内システム 実験的プロジェクト 技術検証 将来の技術選定の学習 --- まとめ CSS Functions and Mixins Moduleによって、これまでSassなどのプリプロセッサに依存していた「関数」の概念が標準CSSへ取り込まれつつあります。 主なポイントは以下の通りです。 @function で独自関数を定義できる result で戻り値を返せる 引数やデフォルト値を設定可能 条件分岐やメディアクエリも利用可能 JavaScript不要のスタイル計算が増える ただし現状は実験的機能で本番利用は慎重に CSSは近年急速に進化しており、「Sassでしかできなかったこと」が次々と標準機能として実装されています。 今後のフロントエンド開発では、「まずCSSでできないか？」を考える時代になっていくのかもしれません。