<dashed-function>: CSS カスタム関数

構文

<dashed-function> の値は、--function-name に続いて、関数の引数を含む括弧で構成されます（--my-function(30px, 3) など）。

通常の CSS プロパティ値やプロパティ値の要素の代わりに <dashed-function> 値を含めることができます。これは、静的な値を指定するのではなく、関数の論理に基づいて値を動的に計算したい場合に使用します。

カンマを含む値を引数を渡したい場合は、中括弧 ({ }) で囲んで渡すことができます。

例

これ以外の例については、CSS カスタム関数の使用ガイドを参照してください。

基本的な <dashed-function> の使い方

この例は、渡された色の半透明バージョンを返す基本的な関数を示しています。

HTML

このマークアップには、テキストコンテンツを含む <p> 要素があります。

<p>いくらかのコンテンツ</p>

CSS

このスタイルでは、まず CSS カスタム関数を定義しています。この関数は --transparent と呼ばれ、色と数値のアルファチャンネル値の 2 つの引数を受け取ります。関数の本体では、相対色の構文を使って、受け取った色を受け取ったアルファチャンネル値に等価なアルファチャンネルと共に oklch() 色に変換します。これが関数の result となります。

@function --transparent(--color <color>, --alpha <number>) {
  result: oklch(from var(--color) l c h / var(--alpha));
}

次に、--base-color カスタムプロパティを #faa6ff の値で :root 要素に定義します。このプロパティを <p> 要素の border 色の値として指定し、さらにその background-color 値を同じ色の透明版に設定します。これは、<dashed-function> 構文により --transparent() 関数を指定し、引数としてvar(--base-color)と0.8を渡したものと同じものです。

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

:root {
  --base-color: #faa6ff;
}

p {
  width: 50%;
  padding: 30px;
  border-radius: 20px;
  border: 3px solid var(--base-color);
  background-color: --transparent(var(--base-color), 0.8);
}

結果

仕様書

ブラウザーの互換性

関連情報

• CSS カスタムプロパティ
• @function アットルール
• type() 関数
• CSS カスタム関数の使用
• CSS カスタム関数とミックスインモジュール