CSS変数を深く理解する（整理してまとめたもの）-フロントエンドQ&A-php.cn

この記事では、CSS 変数に関する関連知識をお届けします。ネイティブ CSS は徐々にネスティング、変数、関数関数をサポートし始めています。皆様のお役に立てれば幸いです。

CSS変数を深く理解する（整理してまとめたもの）

Sass を使用したことがある人なら誰でも、主にネスト、変数、関数関数を使用できることを知っていますが、実際、ネイティブ CSS では徐々にサポートされ始めています。確かに、現時点では私とあなただけがよく知っていますが、他の人はまだ初期段階にあります。CSS 変数を理解すると、CSS がこれから非常に強力になることがわかります。

変数の宣言

変数を宣言するときは、変数名の前に 2 つのハイフン (--) を追加する必要があります

// 局部声明 body { --foo: #ed145b; --bar: #F7EFD2; } // 全局声明 :root{ --foo: #ed145b; --bar: #F7EFD2; }

ログイン後にコピー

例, 上記の 2 つの変数: --foo と --bar を宣言します。実際には、これらを CSS カスタムプロパティとして理解するだけで済みます。これらは、color や font-size などの正式なプロパティと変わりませんが、デフォルトの意味はありません. css 変数名に注意してください。大文字と小文字が区別されますが、通常、作成する CSS は大文字と小文字が区別されません。

なぜ変数を表すために 2 つの接続線 (--) を選択するのかと疑問に思われるかもしれません。 $foo は Sass によって使用され、@foo は Less によって使用されるためです。競合を避けるために、公式の CSS 変数では代わりに 2 つの結合線が使用されます。

命名仕様

命名に関しては、さまざまな言語でいくつかの注意事項があります。たとえば、CSS セレクターは数字で始めることはできませんし、JS の変数は直接数値にすることはできません。ただし、CSS 変数では、そのような制限はありません。例:

:root { --1: #369; } body { background-color: var(--1); }

ログイン後にコピー

には、$、[、^、(、% などの文字を含めることはできません。通常の文字は、「数字 [0-9]」と「文字」に限定されます。 [a-zA" -Z]"、"underscore_"、および "dash-" は組み合わせですが、中国語、日本語、または韓国語にすることができます。例:

body { --深蓝: #369; background-color: var(--深蓝); }

ログイン後にコピー

var() function

変数を宣言した後、当然それを取得して使用したいので、var() 関数を使用して変数を読み取ります。

p { color: var(--foo); border::1px solid var(--bar); }

ログイン後にコピー

var()2 番目のパラメータ

color: var(--foo, #ED145B); //第二个参数就是默认值，假设--foo为空情况下，会使用#ED145B

ログイン後にコピー

var() 関数は次のことができます。変数の宣言でも使用できます

:root { --primary-color: red; --logo-text: var(--primary-color); // 上面刚声明，这里就可以使用 }

ログイン後にコピー

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

.foo { --side: margin-top; /* 很显然，下面是无效的 */ var(--side): 20px; }

ログイン後にコピー

変数値の型

変数値が文字列の場合は、他の文字列の連結で使用できます。

--bar: 'hello'; --foo: var(--bar)' world'; // 示例 body:after { content: '--screen-category : 'var(--screen-category); }

ログイン後にコピー

変数値が数値の場合、数値単位を直接使用することはできません

foo { --gap: 20; /* 下面无效 */ margin-top: var(--gap)px; /* 通过calc去计算，下面有效 */ margin-top: calc(var(--gap) * 1px); }

ログイン後にコピー

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

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

ログイン後にコピー

関数ドメイン

同じ CSS 変数を複数のセレクターで宣言できます。読み込むときは、最も優先度の高い宣言が有効になります。これは、次と一致します。 CSS の「カスケード」ルール

蓝色

绿色

红色

ログイン後にコピー

上記のコードでは、3 つのセレクターはすべて --color 変数を宣言しています。さまざまな要素がこの変数を読み取るとき、最も優先度の高いルールが使用されるため、色は

互換処理

CSS 変数をサポートしていないブラウザの場合は、次の記述方法を使用できます。

a { color: #7F583F; color: var(--primary); // 应该很好理解，如果这里读不出值，那么并不会覆盖上面的color }

ログイン後にコピー

検出には @support コマンドを使用します

a { @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ }

ログイン後にコピー

JavaScript の操作 (本質)

JavaScript はブラウザが CSS 変数をサポートしているかどうかも検出できます

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ }

ログイン後にコピー

JavaScript が CSS 変数を操作する方法は次のとおりです。 follow

// 设置变量 document.body.style.setProperty('--primary', '#7F583F'); //局部 document.documentElement.style.setProperty('--primary', '#7F583F'); //全局 // 读取变量 document.body.style.getPropertyValue('--primary').trim(); /局部 document.documentElement.style.getPropertyValue('--primary').trim(); /全局 getComputedStyle(document.documentElement).getPropertyValue('--time'); // 全局，如果是在css表中设置的需要这种方式获取 // '#7F583F' // 删除变量 document.body.style.removeProperty('--primary'); //局部 document.documentElement.style.removeProperty('--primary'); //全局

ログイン後にコピー

これは、JavaScript が任意の値を変換できることを意味します。値はスタイルシートに格納されます。以下はイベントをリッスンする例です。イベント情報は CSS 変数

const docStyle = document.documentElement.style; document.addEventListener('mousemove', (e) => { docStyle.setProperty('--mouse-x', e.clientX); docStyle.setProperty('--mouse-y', e.clientY); });

ログイン後にコピー

## に格納されます#. これは、JavaScript がスタイルシートに任意の値を格納できることを意味します。以下はイベントをリッスンする例です。イベント情報は CSS 変数に格納されます

const docStyle = document.documentElement.style; document.addEventListener('mousemove', (e) => { docStyle.setProperty('--mouse-x', e.clientX); docStyle.setProperty('--mouse-y', e.clientY); });

ログイン後にコピー

CSS にとって役に立たない情報も置くことができますCSS 変数に

--foo: if(x > 5) this.width = 10;

ログイン後にコピー

上記のコードでは、--foo の値は CSS では無効なステートメントですが、JavaScript では読み取ることができます。これは、CSS 変数にスタイル設定を記述し、JavaScript にそれを読み取らせることができることを意味します。したがって、CSS 変数は、JavaScript が CSS と通信する方法を提供します。

概要

ブラウザのネイティブ機能は、変換せずに直接実行できます

CSS と JS 間の接続を大幅に容易にする DOM オブジェクトのメンバー

によって Sass/Less の使用が妨げられるわけではありません。組み合わせて使用できます。

(学習ビデオ共有:

css ビデオチュートリアル)

以上がCSS変数を深く理解する（整理してまとめたもの）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。