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

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS変数とは何ですか? CSS 変数について学ぶ: CSS 変数の継承とスコープ

php是最好的语言

Jul 30, 2018 pm 02:30 PM

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(&#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="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

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;

概要

LESSやSASSなどの従来のプリプロセッサ変数と比較すると、CSS変数の利点は次のとおりです:

CSS変数は動的であり、ページの実行中に変更できますが、従来のプリプロセッサ変数はコンパイル後に変更できません。

CSS変数は、継承、組み合わせて使用、スコープを持つことができます

PHP学習 - 可変変数、 - 変数変数
php 学習ログ - 変数スコープ、変数

関連ビデオ:

Geek Academy CSS および CSS3 ビデオチュートリアル

以上がCSS変数とは何ですか? CSS 変数について学ぶ: CSS 変数の継承とスコープの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

React状態管理にImmerを使用しますApr 18, 2025 am 10:41 AM

状態を利用して、アプリケーションデータを追跡します。ユーザーがアプリケーションと対話するにつれて状態が変更されます。これが発生したら、状態を更新する必要があります

アニメーション化されたファビコンの作成Apr 18, 2025 am 10:35 AM

タブを切り替えたときに目を向ける最初のものです。

Netlify-Hostedサイトでドメインを使用しますApr 18, 2025 am 10:34 AM

Netlifyにはカスタムドメイン用の独自のドキュメントがあります。したがって、このようなものに関する馬の技術ドキュメントを探している場合、それはのソースとして扱われるべきです

擬似コードApr 18, 2025 am 10:33 AM

Yonatan Doronは、「Art of Code - なぜより多くの擬似コードを書くべきなのか」というメディアに関する投稿を書きました。擬似コードのファンとして、そのタイトルが大好きです

＆＃039;は、マリー・コンドの組織治療をgruntに任せてくださいApr 18, 2025 am 10:31 AM

私たちは、WebpackとNPMスクリプトの時代に住んでいます。良いか悪いか、彼らはロールアップ、JSPM、Gulpのビットとともに、バンドリングとタスクランニングのリードを奪いました。しかし

大分裂から分岐しますApr 18, 2025 am 10:27 AM

フロントエンド開発者という用語が好きです。懸念がある場合、それはあなたの仕事の性質をカプセル化します。

ウェブサイトを立ち上げるための初心者の旅Apr 18, 2025 am 10:20 AM

2018年9月、私はWeb開発を学ぶ旅のほんの数ヶ月でした。私が多くの新しい開発者の場合は確かにそうであるように、それは大きな仕事でした

すべての新しいES2019のヒントとトリックApr 18, 2025 am 10:19 AM

ECMAScript標準は、ES2019に新機能を追加することで再び更新されました。現在、ノード、Chrome、Firefox、Safariで正式に利用可能になりました

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。