質問内容

など、cssでグローバル変数を設定する方法はありますか？

@Color1 = #fff;
@Color2 = #b00;

h1 {
  color:@Color1;
  background:@Color2;
}

どのように解決するのですか？

最新の更新情報です。 16/01/2020

CSSカスタムプロパティ(変数)登場!

2020 年になり、新しいアプリケーションでこの機能を正式に展開する時が来ました。

プリプロセッサー "NOT"。 は必須です!

CSSには多くの繰り返しがあります。一つの色が数カ所で使われることがあります。

CSSの宣言によっては、これをカスケードで上位に宣言し、CSSの継承で自然に解決させることが可能です。

非自明なプロジェクトでは、これは常に可能というわけではありません。変数を宣言することで :root 擬似要素に変数を宣言することで、CSS 作成者はその変数を使用して繰り返しのいくつかのインスタンスを停止させることができます。

どのように機能するか

スタイルシートの先頭で変数を設定します。

CSS

ルートクラスを作成します。

:root {
}

変数の作成 (--) [文字列]です。 : [値]です。 )

:root {
  --red: #b00;
  --blue: #00b;
  --fullwidth: 100%;
}

CSS文書内の任意の場所に変数を設定します。

h1 {
  color: var(--red);
}
#MyText {
  color: var(--blue);
  width: var(--fullwidth);
}

ブラウザサポート / 互換性

参照 caniuse.com をご覧ください。

Firefoxです。 バージョン 31 + (デフォルトで有効)

対応時期 2014 (いつも通りリードしています)

Mozilla からの詳細な情報

クロームです。 バージョン 49 + (デフォルトで有効) .

以降にサポートされる 2016

Safari/IOS Safariです。 バージョン 9.1/9.3 (デフォルトで有効) .

以降にサポートされる 2016

オペラです。 バージョン 39 + (デフォルトで有効) .

以降にサポートされる 2016

アンドロイドです。 バージョン 52 + (デフォルトで有効) .

以降にサポートされる 2016

エッジです。 バージョン 15 + (デフォルトで有効) .

以降にサポートされる 2017

CSS カスタム プロパティは Windows Insider Preview ビルド 14986 に上陸しました。

IEです。 豚が飛ぶとき。

もうこの船は沈むしかない。どうせ誰も楽しんで乗っていないのだから☺。

W3C SPEC

今後の CSS 変数の完全な仕様

続きを読む

試してみる

テスト用のフィドルとスニペットを以下に添付します。

(サポートされているブラウザでのみ動作します)

デモフィドル

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
  --W200: 200px;
  --Lft: left;
}
.Bx1,
.Bx2,
.Bx3,
.Bx4 {
  float: var(--Lft);
  width: var(--W200);
  height: var(--W200);
  margin: 10px;
  padding: 10px;
  border: 1px solid var(--red);
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
}
.Bx2 {
  color: var(--grey);
  background: black;
}
.Bx3 {
  color: var(--grey);
  background: var(--blue);
}
.Bx4 {
  color: var(--grey);
  background: var(--red);
}

<p>If you see four square boxes then variables are working as expected.</p>

<div class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>