なぜCSS @functionが必要なのか？
CSSでは長らく calc() や min()、max() などの組み込み関数で計算をサポートしてきました。しかし、複雑なスタイルロジックを再利用するには、毎回 calc() を組み合わせるか、Sassの関数を使う必要がありました。CSSネイティブの @function が登場したことで、CSSだけで再利用可能なカスタム関数を定義できるようになります。
この機能はまだドラフト段階ですが、CSS変数よりも動的でモジュール化されたスタイルを記述できます。特にデザイントークンの管理や、繰り返しの計算を減らしたいプロジェクトで有用です。
基本構文と実例
@function は -- で始まるユーザー定義識別子を使用します。基本構造は以下の通りです。
@function --half(--size) {
result: calc(var(--size) / 2);
}
.container {
margin-inline: --half(20px); /* 10pxに解決 */
}
型チェックとデフォルト値
引数に型を指定すると、不正な値が渡されたときに事前に防げます。
@function --progression(--current, --total) returns {
result: calc(var(--current) / var(--total) * 100%);
}
.progress-bar {
width: --progression(3, 5); /* 60% */
}
デフォルト値を指定することもできます。
@function --brand-glass(--opacity: 0.5) returns {
result: rgb(10 120 255 / var(--opacity));
}
.header {
background: --brand-glass(); /* デフォルトの0.5が適用 */
}
リスト引数の処理
複数の値を1つのリストとして受け取りたい場合は # サフィックスを使用し、中括弧で囲みます。
@function --get-range(--list#, --n) {
result: calc(max(var(--list)) - min(var(--list)) + var(--n));
}
div {
padding-block: --get-range({10px, 100px, 50px}, 200px); /* 290px */
}
注意点とブラウザサポート
まだ実験段階
@function は CSS Custom Functions and Mixins Module Level 1 仕様で定義されており、現在のブラウザサポートは限定的です。Chrome 148+ で部分的にサポートされており、@supports による機能検出もまだ完全ではありません。
@supports (at-rule(@function)) {
/* ... */
}
循環参照の禁止
関数AがBを呼び出し、Bが再びAを呼び出すと、ブラウザは無限ループを防ぐため両方の関数を無効にします。
日本での適用文脈
日本国内では、まだCSS @function を実際のプロダクションに適用するのは難しい状況です。ブラウザの互換性問題により、ポリフィルも存在しないためです。しかし、デザインシステムを構築している企業では、Sassの関数をCSSネイティブへ移行する方向性を事前に準備しておくと良いでしょう。特にトークンベースのテーマ管理で有用です。
次の学習ステップ
@function が完全にサポートされるまでは、CSS変数 + calc() の組み合わせで同様のパターンを実装する練習をおすすめします。また、@mixin の提案も合わせてチェックしてみてください。
まとめ
CSS @function は、スタイルロジックをモジュール化し再利用するための強力なツールになる可能性を秘めています。まだ実験段階ですが、コードベースの保守性を高めたい開発者なら、早めに構文とパターンを学んでおくことをおすすめします。
関連記事として AI評価コストが新たなコンピューティングボトルネックに (2026年現状分析) と パントンがエージェントAIで色彩専門性を拡張した方法 AI対応データベースの核心的役割 も合わせてご覧ください。