Java、C++、JavaScript などの一部の命令型プログラミング言語では、変数を通じて特定の状態を追跡できます。変数は特定の値に関連付けられたシンボルであり、変数の値は時間の経過とともに変化する可能性があります。
CSS のような宣言型言語では、時間の経過とともに変化する値は存在せず、変数の概念もありません。
CSS では、保守性の課題に簡単に対処するために階層変数の概念が導入されています。これにより、CSS ツリー全体で変数をシンボリックに参照できるようになります。 1. CSS 変数とは現在、CSS 変数には 2 つの形式があります:
where
を使用します。たとえば --example-variable: 20px; CSS 宣言ステートメントでも。これは、 --example-varibale 変数に 20px を割り当てることを意味します
2. 変数の宣言 変数の名前付け
宣言方法--header-color
和--Header-Color
CSS 変数を宣言する方法は非常に簡単です。次のように、名前は color という CSS 変数で宣言されます。
CSSファイルに記述します
HTMLタグのインラインスタイルに記述します
JSを使用して.style.setPropertyメソッドを使用して要素を宣言します
body{ --color: red; } <body style="--color: red;"></body> document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')
の型変数値
--bar: 'hello'; --foo: var(--bar)' world'; body:after { content: '--screen-category : 'var(--screen-category); }
.foo { --gap: 20; /* 无效 */ margin-top: var(--gap)px; } .foo { --gap: 20; margin-top: calc(var(--gap) * 1px); }
変数値に単位がある場合、文字列として記述することはできません
/* 无效 */ .foo { --foo: '20px'; font-size: var(--foo); } /* 有效 */ .foo { --foo: 20px; font-size: var(--foo);
注: 変数値は属性名としてではなく、属性値としてのみ使用できます
.foo { --side: margin-top; /* 无效 */ var(--side): 20px; }
上記のコードでは、変数 --side は属性名として使用されますが、これは無効です
3. CSS 変数の継承とスコープ
カスタム プロパティも継承をサポートします。要素にカスタム属性が定義されていない場合、カスタム属性の値は親要素から継承されます
class="one"> <p class="two"> <p class="three"> </p> <p class="four"> </p> <p> </p>
.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; }
$zcolor:blue; .ulbox { $zcolor:red; } ul{ color: $zcolor; }
と対話できませんネイティブ CSS カスタム プロパティは、任意の CSS プリプロセッサまたは純粋な CSS ファイルで使用できます
6. JS 操作変数
CSS 変数は JS と対話できます
ul { color: blue; }
7. 互換性
CSS カスタム属性のメソッドをサポートするかどうかを検出します
:root{ --testMargin:70px; } // 读取 var root = getComputedStyle(document.documentElement); var cssVariable1 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable1); // '70px' // 写入 document.documentElement.style.setProperty('--testMargin', '100px'); var cssVariable2 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable2); // '100px' // 删除 document.documentElement.style.removeProperty('--testMargin'); var cssVariable3 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable3); // '70px'
概要
関連ビデオ:
Geek Academy CSS および CSS3 ビデオチュートリアル
以上がCSS変数とは何ですか? CSS 変数について学ぶ: CSS 変数の継承とスコープの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。