CSS変数の説明とチュートリアル-CSSチュートリアル-php.cn

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

小云云

リリース： 2017-11-17 17:31:46

オリジナル

2384 人が閲覧しました

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: &#39;hello&#39;;--foo: var(--bar)&#39; world&#39;;

ログイン後にコピー

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

body:after {
  content: &#39;--screen-category : &#39;var(--screen-category);}

ログイン後にコピー

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

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

ログイン後にコピー

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

.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);}

ログイン後にコピー

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(&#39;--a&#39;, 0);if (isSupported) {
  /* supported */} else {
  /* not supported */}

ログイン後にコピー

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

// 设置变量document.body.style.setProperty(&#39;--primary&#39;, &#39;#7F583F&#39;);// 读取变量document.body.style.getPropertyValue(&#39;--primary&#39;).trim();
// &#39;#7F583F&#39;// 删除变量document.body.style.removeProperty(&#39;--primary&#39;);

ログイン後にコピー

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

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

ログイン後にコピー

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