CSSカスタム関数

目次

概要

使用例

基本的な使用例

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

CSS
@function --add(--arg1, --arg2) {
 result: calc(var(--arg1) + var(--arg2));
}
.example-basic {
 width: --add(100px, 200px);
 border: 1px solid #ccc;
}
HTML
<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;
}

Copyright (C) 2025 杜甫々
初版:2025年8月10日 最終更新:2025年8月10日
https://www.tohoho-web.com/ex/css-custom-function.html

AltStyle によって変換されたページ (->オリジナル) /