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

カスタムプロパティの値は、対応するvar()発現のための文字列（いずれかのリテラル文字列、attr()式、又はcontentの場合における前記トークンの任意の数の任意の組み合わせ）でなければなりません文字列が期待される場所で正しく動作するようにします。

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