html - HTML ページに CSS 変数を実装する

Question

外部 CSS ファイルで言及されている多くの背景画像と色を含む HTML ファイルがあり、HTML のヘッダータグ内にリンクされています。

CSS 変数を使用して背景画像と色のパスを取得し、これを HTML ファイルで使用したいと考えています。

Javascript またはサーバー側の言語またはプラグインを使用せずに CSS 変数を使用することは可能ですか。純粋な CSS と HTML を使用できるのは、これを実現するためだけです。http://lesscss.orgサイトも見ましたが、使用できないプラグインがいくつかありました。

これは達成可能ですか？もしそうなら、誰かがサンプルコードを書くことができますか?

score 1 · Accepted Answer

これは現在、クロスブラウザ方式では不可能ですが、機能は特定されており、今後数年間で広く使用できるようになることを願っています:)

提案された構文

:root { 
    var-main-background: #f00;
    var-main-color: #111;
}
h1 { 
    background: $main-background;
    color: $main-color;
}

注：これは現在ブラウザでは使用できないため、当面はLESSやSASSなどの回避策を使用する必要があります。

score 0 · Accepted Answer

これを達成する唯一の方法は、LESSを使用することだと思います。

score 0 · Accepted Answer

LESS には CSS 変数があります。反対票を投じる前に、質問をご覧ください。

LESS は、これらの CSS 変数をそれぞれの値に置き換える JavaScript ファイルです。純粋な HTML と CSS でこれを実現する方法はありません。それが、そもそも LESS やその他の動的スタイルシート言語が作成された理由です。