CSS変数とは何ですか? CSS 変数について学ぶ: CSS 変数の継承とスコープ
CSS 変数が役立つこと
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; } <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);
}変数値が数値の場合、数値単位と直接接続することはできません。 calc() 関数を使用する必要があります。それらを接続するには
.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>次の CSS を定義します:
.two { --test: 10px; }
.three { --test: 2em; }この例では、var(--test) の結果は次のようになります。
class="two" 対応ノード: 10px
class="three" 対応ノード: 要素: 2em
class="four" 対応ノード: 10px (親から継承)
-
class="one": 無効な値に対応するノード。つまり、属性値はカスタム CSS 変数によってオーバーライドされていないデフォルト値です。最上位のスコープは次のとおりです: root
4. レスポンシブ p { --color: #7F583F; --bg: #F7EFD2; } .mediabox { color: var(--color); background: var(--bg); } @media screen and (min-width: 768px) { body { --color: #F7EFD2; --bg: #7F583F; } }ログイン後にコピー5. プリプロセッサとの違い
1. プリプロセッサ変数はリアルタイムではありません
$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('--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'概要
LESSやSASSなどの従来のプリプロセッサ変数と比較すると、CSS変数の利点は次のとおりです:
CSS変数は動的であり、ページの実行中に変更できますが、従来のプリプロセッサ変数はコンパイル後に変更できません。
CSS変数は、継承、組み合わせて使用、スコープを持つことができます
- JavaScriptで使用すると、JSから簡単に読み書きできます
- 関連記事：
- PHP学習 - 可変変数、 - 変数変数
- php 学習ログ - 変数スコープ、変数
関連ビデオ:
Geek Academy CSS および CSS3 ビデオチュートリアル
以上がCSS変数とは何ですか? CSS 変数について学ぶ: CSS 変数の継承とスコープの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
