10

CSS 変数を使用しようとしています。オンラインでチュートリアルを探していますが、これまでのところすべて機能しています。

これが私のCSSです：

@variables {
 defaultColor: #8E5050;
 defaultBackGround: #E1DBC3;
}
body {
 background: var(defaultBackGround);
}
a {
 color: var(defaultColor);
}

私も試しました：

body {
 background: @defaultBackGround;
}
a {
 color: @defaultColor;
}

それらのどれも機能しません。何が間違っていますか? ありがとう

4

4 に答える 4

20

SassやLessなどの CSS プリプロセッサを使用します。

于 2011-09-28T12:18:16.783 に答える
8

使用している変数は、通常の CSS 仕様の一部ではありません。CSSフレームワークで書いているようです。

純粋な CSS を使用したい場合は、色 / マージン / パディングの値を毎回手動で設定する必要があります。しかし、お気に入りのテキスト エディタの優れた「検索と置換」機能が役立つ場合があります。:)

これらの変数を使用したい場合は、@Petah が適切な答えを提供します。:)

于 2011-09-28T12:23:39.620 に答える
5

ネイティブの CSS3 変数を使用してください!

変数は、実際には CSS3 のネイティブ機能です。MDNで仕様を読むことができます。ただし、これらはまだ比較的新しい機能であるため、使用する前に、こちらのブラウザ サポート チャートを確認することをお勧めします。

ただし、CSS 変数は Chrome、Firefox、Opera、Safari、Microsoft Edge の最新バージョンでサポートされています。

次のコードは、CSS 変数の使用例を示しています。

:root {
    --name: #ff0000;
}
p {
    color: var(--name);
}

これはどのように作動しますか？

変数は、要素の親コンテナーで定義されている場合に使用できます。ここで:rootは、変数がどこからでもアクセスできるように使用します。

--name:content;変数は、 wherenameは変数の名前、 content は変数の内容を使用して定義できます (これは、 のような色、 のような#ff0000サイズ1em、またはより多くの可能な値の 1 つです)。

次に、var(--name)CSS コードでプロパティの代わりに使用するだけです。ここでname、変数を呼び出した名前です。

于 2013-12-29T22:32:09.930 に答える
-1

私が理解していることから、変数はまだ完全にはサポートされていませんが、変数が次の場合に設定する方法は次のとおりです。

/* declare in :root with the usual browser prefixes */
:root {
  var-myVariableColor: #f00;
  -webkit-var-myVariableColor: #f00;
  -moz-var-myVariableColor: #f00;
  -ie-var-myVariableColor: #f00;
}

/* to reference encase in var() */
body {
  background-color: var(myVariableColor);
}
于 2014-03-03T15:10:01.710 に答える