ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS変数とは何ですか? CSS 変数について学ぶ: CSS 変数の継承とスコープ

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

php是最好的语言
リリース: 2018-07-30 14:30:01
オリジナル
1960 人が閲覧しました

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

  • 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(&#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変数は、継承、組み合わせて使用​​、スコープを持つことができます

    JavaScriptで使用すると、JSから簡単に読み書きできます
  • 関連記事:
  • PHP学習 - 可変変数、 - 変数変数
  • php 学習ログ - 変数スコープ、変数

関連ビデオ:

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

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート