CSS変数の説明とチュートリアル

CSS はフロントエンド開発にとって不可欠な言語です。これをうまく使用できると、開発が非常に効率的になります。CSS 変数を使用するには、SASS や LESS などのプリコンパイラーしか使用できませんでした。 。今年 3 月、Microsoft は Edge ブラウザが CSS 変数をサポートすると発表しました。この重要な新しい CSS 機能は、すべての主要ブラウザですでにサポートされています。この記事では、ネイティブ CSS の使用方法を包括的に紹介します。ネイティブ CSS が非常に強力になることがわかります。この記事では、CSS 変数のいくつかの使用法を学習します。

1. 変数の宣言

変数を宣言する場合は、変数名の前にハイフン(--)を2つ付けてください。

body {
  --foo: #7F583F;
  --bar: #F7EFD2;}

上記のコードでは、本文セレクターで 2 つの変数 --foo と --bar が宣言されています。

それらは色やフォントサイズなどの形式的なプロパティと変わりませんが、デフォルトの意味はありません。したがって、CSS 変数は「CSS カスタム プロパティ」とも呼ばれます。変数とカスタム CSS プロパティは実際には同じものであるためです。

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

CSS変数にはさまざまな値を入れることができます。

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
  --header-height: 68px;
  --content-padding: 10px 20px;
  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);}

変数名は大文字と小文字が区別され、--header-color と --Header-Color は 2 つの異なる変数です。

2. var()関数

var()関数は変数を読み取るために使用されます。

a {
  color: var(--foo);
  text-decoration-color: var(--bar);}

var() 関数は、2 番目のパラメーターを使用して変数のデフォルト値を表すこともできます。変数が存在しない場合は、このデフォルト値が使用されます。

color: var(--foo, #7F583F);

2 番目のパラメータは内部のカンマやスペースを処理せず、パラメータの一部とみなされます。

var(--font-stack, "Roboto", "Helvetica");var(--pad, 10px 15px 20px);
var()函数还可以用在变量的声明。
:root {  --primary-color: red;  --logo-text: var(--primary-color);}

変数値は属性名ではなく属性値としてのみ使用できることに注意してください。

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;}

上記のコードでは、変数 --side が属性名として使用されていますが、これは無効です。

3. 変数値の型

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

--bar: 'hello';--foo: var(--bar)' world';

これを使ってデバッグします（例）。

body:after {
  content: '--screen-category : 'var(--screen-category);}

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

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;}

上記コードでは値と単位を直接併記しているため無効です。それらを接続するには、calc() 関数を使用する必要があります。

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);}

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

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

4. スコープ

同じ 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 変数を宣言しています。さまざまな要素がこの変数を読み取る場合、最も優先度の高いルールが使用されるため、テキストの 3 つの段落の色は異なります。

これは、変数のスコープが、それが配置されているセレクターの有効なスコープであることを意味します。

body {
  --foo: #7F583F;}.content {
  --bar: #F7EFD2;}

上記のコードでは、変数 --foo のスコープが body セレクターの有効スコープであり、 --bar のスコープが .content セレクターの有効スコープです。

このため、グローバル変数は通常、ルート要素:root 内に配置され、どのセレクターでも確実に読み取れるようにします。

:root {
  --main-color: #06c;}

5. レスポンシブ レイアウト

CSS は動的であり、ページに変更を加えると、採用されるルールも変更されます。

この機能を使用すると、レスポンシブ レイアウトのメディア コマンドで変数を宣言し、画面幅が異なると変数値も異なるようにすることができます。

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;}a {
  color: var(--primary);
  text-decoration-color: var(--secondary);}@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }}

6.互換処理

CSS変数をサポートしていないブラウザの場合は、以下の書き方が可能です。

a {
  color: #7F583F;
  color: var(--primary);}

@support コマンドを使用して検出することもできます。

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

7. JavaScript の操作

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

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

JavaScriptはCSS変数を次のように操作します。

// 设置变量document.body.style.setProperty('--primary', '#7F583F');// 读取变量document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'// 删除变量document.body.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);});

CSS にとって役に立たない情報も CSS 変数に入れることができます。

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

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

つまり、CSS 変数は、JavaScript が CSS と通信する方法を提供します。

CSS 変数について多くのことを学べたと思いますが、このチュートリアルが仕事に役立つことを願っています。

関連チュートリアル:

新しい知識: CSS 変数-variable

最初の CSS 変数: currentColor_html/css_WEB-ITnose

CSS 変数 Trial_html/css_WEB-ITnose

以上がCSS変数の説明とチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。