css - CSS 変数の割り当て

Question

おそらくJavascriptを使用して、CSSドキュメント内で変数を使用することは可能ですか?

たとえば、「#ffffff」に割り当てられた全体的な変数「colorOne」があるとします。

後で「colorOne」を呼び出すことは可能ですか？例: "color: colorOne;"?

インスタンスを置換するために検索と置換を使用できますが、これは非常に面倒です。代替手段はありますか?

score 4 · Accepted Answer

純粋なCSSで - いいえ！

ただし、それを実行して css をコンパイルできる多くのツールを使用できます。

score 2 · Accepted Answer

これは純粋な CSS では不可能です。

ただし、 LESSなどのサードパーティライブラリを使用して、これを実現できます。

@nice-blue: #5B83AD;

#header { color: @nice-blue; }

score 2 · Accepted Answer

たとえば、プリプロセッサを使用できます: http://lesscss.org/

これにより、次のように CSS を記述できます。

@colorOne: #FFFFFF;

.main_links {
  color: @colorOne;
}
h2 {
  color: @colorOne;
}

コンパイル後の出力は次のようになります

.main_links {
  color: #FFFFFF;
}
h2 {
  color: #FFFFFF;
}

変数を割り当てるだけでなく、LESS を使用する理由は他にもあります。これは強力であり、ネストされたスタイルなど、さらに多くのことを実行できます。ドキュメントを参照してください: http://lesscss.org/#synopsis

score 2 · Accepted Answer

2

SASSもお忘れなく。 http://sass-lang.com

構文的に素晴らしいスタイルシート。

于 2013-08-28T13:27:18.243 に答える

score 1 · Accepted Answer

次のようなものを使用する必要がありますLESS。

これにより、変数を使用できるようになります。

@colorOne: #5B83AD;

#header { color: @colorOne; }

6 に答える 6