CSS変数とは何ですか? CSS 変数について学ぶ: CSS 変数の継承とスコープ-CSSチュートリアル-php.cn

Java、C++、JavaScript などの一部の命令型プログラミング言語では、変数を通じて特定の状態を追跡できます。変数は特定の値に関連付けられたシンボルであり、変数の値は時間の経過とともに変化する可能性があります。
CSS のような宣言型言語では、時間の経過とともに変化する値は存在せず、変数の概念もありません。
CSS では、保守性の課題に簡単に対処するために階層変数の概念が導入されています。これにより、CSS ツリー全体で変数をシンボリックに参照できるようになります。 1. CSS 変数とは現在、CSS 変数には 2 つの形式があります:

変数。これには有効な識別子と有効な値があります。どこでも使用できます。変数は var() 関数を使用して使用できます。例: var(--example-variable) は、--example-variable

Custom 属性に対応する値を返します。これらのプロパティは、名前として特別な形式 --

where

を使用します。たとえば --example-variable: 20px; CSS 宣言ステートメントでも。これは、 --example-varibale 変数に 20px を割り当てることを意味します

2. 変数の宣言変数の名前付け

変数宣言では 2 つの結合行を使用します - 変数を表すために、$color は Sass に属する構文であり、@color はCSS ネイティブ変数との競合を避けるため、Sass Less 構文に属する構文--)

注: 変数名は大文字と小文字が区別され、

2 つの異なる変数です

宣言方法
--header-color和--Header-Color CSS 変数を宣言する方法は非常に簡単です。次のように、名前は color という CSS 変数で宣言されます。

CSSファイルに記述します

HTMLタグのインラインスタイルに記述します
JSを使用して.style.setPropertyメソッドを使用して要素を宣言します

body{
  --color: red;
}
&lt;body style=&quot;--color: red;&quot;&gt;&lt;/body&gt;
document.getElementsByTagName(&#39;body&#39;)[0].style.setProperty(&#39;--color&#39;, &#39;red&#39;)

ログイン後にコピー

の型変数値

--bar: &#39;hello&#39;;
--foo: var(--bar)&#39; world&#39;;


body:after {
  content: &#39;--screen-category : &#39;var(--screen-category);
}

ログイン後にコピー

変数値が数値の場合、数値単位と直接接続することはできません。 calc() 関数を使用する必要があります。それらを接続するには

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

ログイン後にコピー

変数値に単位がある場合、文字列として記述することはできません

/* 无效 */
.foo {
  --foo: &#39;20px&#39;;
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);

ログイン後にコピー

注: 変数値は属性名としてではなく、属性値としてのみ使用できます

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

ログイン後にコピー

上記のコードでは、変数 --side は属性名として使用されますが、これは無効です

3. CSS 変数の継承とスコープ

カスタムプロパティも継承をサポートします。要素にカスタム属性が定義されていない場合、カスタム属性の値は親要素から継承されます

class=&quot;one&quot;&gt;
  &lt;p class=&quot;two&quot;&gt;
    &lt;p class=&quot;three&quot;&gt;
    &lt;/p&gt;
    &lt;p class=&quot;four&quot;&gt;
    &lt;/p&gt;
  &lt;p&gt;
&lt;/p&gt;

ログイン後にコピー

次の CSS を定義します:

.two { --test: 10px; }
.three { --test: 2em; }

ログイン後にコピー

この例では、var(--test) の結果は次のようになります。

class="two" 対応ノード: 10px

class="three" 対応ノード: 要素: 2em
class="four" 対応ノード: 10px (親から継承)
class="one": 無効な値に対応するノード。つまり、属性値はカスタム CSS 変数によってオーバーライドされていないデフォルト値です。最上位のスコープは次のとおりです: root

p {
  --color: #7F583F;
  --bg: #F7EFD2;
}

.mediabox {
  color: var(--color);
  background: var(--bg);
}

@media screen and (min-width: 768px) {
  body {
    --color:  #F7EFD2;
    --bg: #7F583F;
  }
}

ログイン後にコピー

5. プリプロセッサとの違い

$color:#7F583F;

@media screen and (min-width: 768px) {
    $color: #F7EFD2;
}

.mediabox {
      background: $color;
}

ログイン後にコピー

コンパイル結果

.mediabox {
  background: #7F583F; 
}

ログイン後にコピー

2. プリプロセッサ変数はスコープを制限できません

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}

ログイン後にコピー

3. プリプロセッサ変数はオペレーション

と対話できませんネイティブ CSS カスタムプロパティは、任意の CSS プリプロセッサまたは純粋な CSS ファイルで使用できます

6. JS 操作変数

CSS 変数は JS と対話できます

ul {
  color: blue; 
}

ログイン後にコピー

7. 互換性

CSS カスタム属性のメソッドをサポートするかどうかを検出します

:root{
  --testMargin:70px;
}
//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable1); // &#39;70px&#39;
 
// 写入
document.documentElement.style.setProperty(&#39;--testMargin&#39;, &#39;100px&#39;);
var cssVariable2 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable2);  // &#39;100px&#39;

// 删除
document.documentElement.style.removeProperty(&#39;--testMargin&#39;);
var cssVariable3 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable3); // &#39;70px&#39;

ログイン後にコピー

概要