web-dev-qa-db-ja.com

cssカスタムプロパティ変数の使用が機能しない

スタイルシートには非常に大量のCSSがあり、多くの場合、値が繰り返されます。 CSSの変数についてどこかで読んだ。私のコードの下はです。しかし、それは機能していません

element {
      --main-bg-color: brown;
    }

ここで変数を使用していますが、機能していません

body {
  background-color: var --main-bg-color;
}
cssstylesheet
4
ravins

あなたはすべてを正しく行いました、ただ変数を入れておいてください（ここに変数を入れてください）

element {
  --main-bg-color: brown;
}
body {
  background-color: var(--main-bg-color);
}
6
Hasanuzzaman Sattar

var() 表記はメソッドのように機能します

var(<custom-property-name>)

変数を:rootセレクターに入れることを検討するかもしれません。

:root {
  --main-bg-color: brown;
}
/* The rest of the CSS file */
body {
  background-color: var(--main-bg-color);
}

:rootはグローバルスコープに似ていますが、要素自体（つまり、body { --myvar: ... }）または祖先要素（つまり、html { --myvar: ... }）を使用して変数を定義することもできます。

2
MikeM

MDNリファレンスページ を参照してください。簡単に言うと、カスタム変数を使用するには、それらを_:root_セレクター内に配置する必要があります。

_:root {
  --main-bg-color: brown
}
_

別のセレクターで使用するには、var()を使用します。

_body {
  background-color: var(--main-bg-color)
}
_
1
David Daza

使用する場合は、var（-my-variable）を追加する必要があります変数。

しかし、それはCSSカスタムプロパティ（/変数）を使用する必要があるものではありません。

覚えておいてください 一部のブラウザはCSS変数を理解できません 、最も顕著なのはIEです。したがって、通常のCSS値にコンパイルされるため、代わりにプリプロセッサを使用する方が適切です。 SASS、LESS、POSTCSSのいずれか...あなたのボートに浮かぶものは何でも。

CSSカスタムプロパティは、実行時にjavascriptで変更でき、あらゆる種類のすばらしい方法で使用できるため、プリプロセッサプロパティよりもはるかに強力ですが、通常の変数として使用する場合は、プリプロセッサ変数の方が常に優れています。互換性のため。

0
Facundo Corradini