CSS での変数の使用法の概要 (例付き)

この記事では、CSS での変数の使用法を紹介します (例を示します)。必要な方は参考にしていただければ幸いです。助けてくれた。

CSS での変数の使用に関する Ruan Dashen の記事を 2 日前に見て、それを整理しました。

この重要な新しい 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; }
  p { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }</style><p>蓝色</p><p>绿色</p><p id="alert">红色</p>

上記のコードでは、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 */
}

CSS変数を操作するJavaScriptの記述方法は以下の通りです。

// 设置变量
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 での変数の使用法の概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。