@function

概要

@functionルールにより、CSSの中で再利用可能なカスタム関数を作成できます。条件付きロジックを含む複雑な値の計算を一箇所に集約でき、スタイルシートの保守性が大幅に向上します。@mediaなどの条件付きルールと組み合わせて柔軟な値の生成が可能です。

対応ブラウザ

基本構文

@function --spacing(--level) {
  result: calc(var(--level) * 8px);
}
.card {
  padding: --spacing(2);
}

実務での使いどころ

• デザイントークンの動的生成

  スペーシングやフォントサイズなどのデザイントークンをカスタム関数で計算し、一貫性のあるデザインシステムを構築します。

注意点

アクセシビリティ

• 関数自体はアクセシビリティに直接影響しませんが、生成される値がコントラスト比やフォントサイズの基準を満たしているか確認してください。

参考リンク

• MDN Web Docs — @function