CSSカスタム関数

• トップ
• CSSカスタム関数

• 概要
• 使用例
  • 基本的な使用例
  • 戻り値の型
  • 引数の型
  • 引数省略時のデフォルト値
  • メディアクエリとの組み合わせ

概要

• CSS の中で関数を定義できる機能です。
• 2025年8月リリースの Chrome 139 でサポートされました。
• 下記のドキュメントで定義されています。
  • CSS Custom Functions and Mixins Module Level 1

使用例

基本的な使用例

@function でカスタム関数を定義します。関数名は -- で始めます。result: で戻り値を指定します。下記の例では、第1引数と第2引数の合計を求める関数を定義しています。

@function --add(--arg1, --arg2) {
  result: calc(var(--arg1) + var(--arg2));
}
.example-basic {
  width: --add(100px, 200px);
  border: 1px solid #ccc;
}

<div class="example-basic">
  Example
</div>

戻り値の型

returns で戻り値の型を明示することができます。

@function --foo(--arg1, --arg2) returns <length> {
  result: ...;
}

型には下記のいずれかを指定することができます。

angle | color | custom-ident | image | integer | length | length-percentage |
number | percentage | resolution | string | time | url | transform-function

引数の型

引数の型も明示することができます。

@function --foo(--arg1 <length>, --arg2 <length>) {
  result: ...
}

type() で複数の型を指定することができます。下記は長さまたはパーセンテージを意味します。

@function --foo(--arg1 type(<length> | <percentage>)) {
  result: ...
}

+ はその型がスペース区切りで1回以上連続することを意味します。呼び出し側は引数を { ... } で囲みます。

@function --foo(--arg1 <length>+) {
  result: ...
}
.example {
  border: --foo({10px 20px 30px 40px});
}

# はその型がカンマ(,)区切りで1回以上連続することを意味します。呼び出し側は引数を { ... } で囲みます。

@function --foo(--arg1 <length>#) {
  result: max(var(--arg1));
}
.example {
  width: --foo({10px, 20px, 30px, 40px});
}

引数省略時のデフォルト値

下記の様に引数を省略した場合のデフォルト値を指定することができます。

@function --foo(--arg1 <length> : 100px) {
  result: max(var(--arg1));
}
.example {
  width: --foo(200px);           /* 200px */
  height: --foo();               /* 100px */
}

メディアクエリとの組み合わせ

メディアクエリによって戻り値を制御することができます。下記の例では通常であれば 800px、横幅が 1000px 以下であれば 500px を返します。

@function --foo() {
  result: 800px;
  @media (width <= 1000px) {
    result: 500px;
  }
}
.example {
  width: --foo();
  border: 1px solid #ccc;
}