CSSカスタムプロパティの予備的な理解

現在、CSS プリプロセッサは Web 開発の標準となっています。 プリプロセッサの主な利点の 1 つは、変数を使用できるようになることです。これにより、コードのコピーと貼り付けを回避し、開発とリファクタリングを簡素化できます。

この記事では、CSS 変数を CSS 開発ワークフローに統合して、スタイルシートの保守性を高め、繰り返しを減らす方法を学びます。

さあ、始めましょう！

1* CSS変数構文

<1> CSS 変数とは何ですか?

何らかのプログラミング言語を使用したことがあるなら、変数の概念にはすでに馴染みがあるはずです。 変数を使用すると、プログラムが動作するために必要な値を保存および更新できます。

CSS で変数を使用する利点は、プログラミング言語で変数を使用する利点とあまり変わりません。

仕様では次のように述べられています:

[CSS 変数の使用] により、一見任意の値にわかりやすい名前が付けられるため、大きなファイルの読み取りが容易になり、カスタム プロパティで値を 1 回変更するだけで、その変更がその変数のすべての使用に自動的に反映されるため、そのようなファイルの編集がはるかに簡単になり、エラーが発生しにくくなります。

W3C 仕様。

[CSS 変数の使用] により、一見任意の値にわかりやすい名前が付けられるため、大きなファイルの読み取りが容易になり、カスタム プロパティで値を 1 回変更するだけで、その変更が変数が使用されているすべての場所に自動的に伝播されるため、このようなファイルの編集が容易になり、エラーが発生しにくくなります。

<2>CSSカスタム変数構文

一般的な CSS プロパティ (色や塗りつぶしなど) の代わりに変数を宣言するには、- で始まるカスタムの名前付きプロパティを指定します。

。箱{
  --ボックスカラー: #4d4e53;
  --ボックスパディング: 0 10px;
}

プロパティの値には、色、文字列、レイアウト値、式など、任意の有効な CSS 値を指定できます。

以下に、便利なカスタム プロパティをいくつか示します。

：根{
  --メインカラー: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: レベッカパープル;
  --ヘッダーの高さ: 68px;
  --content-padding: 10px 20px;
  --ベースラインの高さ: 1.428571429;
  --遷移期間: .35 秒;
  --external-link: "外部リンク";
  --margin-top: calc(2vh + 20px);
  /* 有効な CSS カスタム プロパティは、後で JavaScript などで再利用できます。 */
  --foo: if(x > 5) this.width = 10;
}

:root についてよくわからない場合は、HTML では html と同じですが、より詳細度が高く、グローバル変数と同等です。

<3> CSS変数の使用

var() 関数

CSS 変数を使用するには、var() CSS 関数を使用し、CSS 変数名を関数に渡します。

。箱{
  --box-color:#4d4e53;
  --ボックスパディング: 0 10px;

  パディング: var(--box-padding);
}

.box div{
  色: var(--box-color);
}

var() 関数の構文は次のとおりです。

var( <カスタムプロパティ名> [, <宣言値> ]? )

メソッドの最初の引数は、置き換えるカスタム属性の名前です。関数のオプションの 2 番目の引数は、フォールバック値として使用されます。最初の引数が無効なカスタム プロパティを参照する場合、関数は 2 番目の値を使用します。

カスタム プロパティが定義されているかどうか不明で、フォールバックとして使用する値を指定したい場合に、これを実行できます。

例えば：

color: var(--foo, red, blue); // red と blue の両方をフォールバック値として指定します。つまり、最初のコンマと関数の終わりの間の任意の値がフォールバック値と見なされます。

padding: var(--box-padding, var(--main-padding));

calc() 関数

私たちはプリプロセッサや他の言語での作業に慣れているので、変数を操作するときに基本的な演算子を使用できると期待しています。 この目的のために、CSS は calc() 関数を提供します。この関数により、カスタム プロパティの値が変更された後にブラウザーが式を再計算します。

：根{
  --インデントサイズ: 10px;

  --indent-xl: calc(2*var(--indent-size));
  --indent-l: calc(var(--indent-size) + 2px);
  --indent-s: calc(var(--indent-size) - 2px);
  --indent-xs: calc(var(--indent-size)/2);
}

単位のない値を扱う場合は、calc() 関数を使用すると非常に便利です。

：根{
  --スペーサー: 10;
}
。箱{
  padding: var(--spacer)px 0; /* 動作しません */
  パディング: calc(var(--spacer)*1px) 0; /* 動作します */
}

CSSカスタムプロパティのスコープ

カスタム プロパティも CSS カスケード ルールに従います。

2* JSでCSSカスタム属性を使用する

CSS ドキュメント内の .sidebar クラスにスコープ設定された、値が 100px の --left-pos という CSS 変数があるとします。

.サイドバー{
--左位置: 100px;
}

--left-pos の値は次のようにして取得できます。

const サイドバー要素 = document.querySelector('.sidebar');
const cssStyles = getComputedStyle(sidebarElement);
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
console.log(cssVal); //100px

CSS プロパティ値を設定します。

サイドバー要素のスタイルを設定するプロパティ('--left-pos', '200px');

3* CSS 変数とプリプロセッサ変数の違いは何ですか?

ウェブサイトのスタイルを設定するときは、おそらく Sass や Less などのプリプロセッサを使用して変数の柔軟性を活用するでしょう。

プリプロセッサを使用すると、変数を設定し、関数、ループ、数学演算などで使用することができます。これは CSS 変数は重要ではないことを意味しますか?

正確にはそうではありません。主な理由は、CSS 変数がプリプロセッサ変数とは異なるためです。

この違いは、CSS 変数はブラウザーで機能する実際の CSS プロパティであるのに対し、プリプロセッサ変数は通常の CSS コードにコンパイルする必要があるため、ブラウザーはそれについて何も認識しないという事実から生じます。

つまり、スタイルシート ドキュメント内の CSS 変数、インライン スタイル属性、SVG プレゼンテーション プロパティを更新したり、JavaScript を使用してそれらを動的に操作したりすることができます。 CSS カスタム プロパティへの変更は、それが使用される場所にすぐに渡されますが、プリプロセッサは事前にコンパイルされているため、これを実行できません。

どちらか一方を選択する必要があるというわけではありません。CSS とプリプロセッサ変数の連携による強力な効果を活用することを妨げるものは何もありません。

要約する

以上が CSS カスタム プロパティの紹介です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。