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 の「カスケード」ルール

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上記のコードでは、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 サイトの他の関連記事を参照してください。