css - content プロパティの値に CSS カスタム プロパティを使用することはできますか?

Question

例：

:root {
    --PrimaryThemeColor: #3acfb6; /* with or without quotes */
}

.ColorSwatch:after {
  content: var(--PrimaryThemeColor);
}

これがレンダリングされると、計算された CSS は文字通りその値になります。

content: var(--PrimaryThemeColor);

計算された値をフォールバックとして挿入するポスト プロセッサを使用している場合でも、値自体は文字列ではないため、content.

.ColorSwatch:after {
    content: #3acfb6;
    content: var(--PrimaryThemeColor);
}

Answer 1

カスタム プロパティの値は、対応する式が文字列が予期される場所で正しく機能するために、文字列 (文字列リテラル、attr()式、またはcontent任意の数のトークンの任意の組み合わせの場合) である必要があります。var()

文字列以外の値を文字列に変換したり、var()関数を使用して 2 つのデータ型の間で変換したりすることはできません。値は常にそのまま解析、保存、置換され、値は任意の種類のトークンを任意の数で構成できるため、データ型間の変換は...かなり困難です。