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

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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  スーパーバイザーウォッチドッグの使い方を3分で学ぶ

>>:  Vue v-onディレクティブの使用について

推薦する

docker-compose で Jenkins をインストールする際の実践的なメモ

ディレクトリを作成する cd /usr/local/docker/ jenkins-docker を...

WeChatアプレットタブの左右スライドスイッチ機能実装コード

効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...

MySQL全文検索の使用例

目次1. 環境整備2. データの準備3. ショーを始める4. 単語分割エンジン要約する参考文献1. ...

HTML ページでコンテンツの選択、コピー、右クリックを防止する方法の詳細な説明

時には、Web ページに掲載されているコンテンツが悪意のある人物に盗用されるのを望まないため、Web...

CentOSにDockerをインストールする方法

ここでは比較的簡単なインストール方法のみを紹介します。 1. yumを使用してインストールするyum...

よく使われる HTML タグとその特徴の完全なリスト

まず、HTML タグのいくつかの特性を知っておく必要があります。 1. 「<keyword&g...

CSSスタイルシートを効率的に使用するためのヒント: スタイルシートの力を最大限に活用する

インターネット経済の継続的な発展に伴い、インターネット上の専門ウェブサイト、公共サービスウェブサイト...

Dockerの核となる原則であるCgroupの詳細な説明

カーネル内の強力なツール cgroup は、NameSpace によって分離されたリソースを制限でき...

Vueの使用に関する深い理解

目次Vueのコアコンセプトを理解するVueの双方向バインディングの原理と実装を探るVue 双方向バイ...

docker インストール後に hello-world を実行する問題を解決する

yumを使用してcentos7.3にDocker V1.13.1をインストールしましたしかし、doc...

HTTP 戻りコード一覧(中国語と英語の説明)

httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...

Vue2.x の応答性の簡単な説明と例

1. Vue レスポンシブの使用法を確認する​ Vue の応答性は、私たち全員がよく知っています。 ...

CSS ボックスの折りたたみに対する 5 つの解決策

まず、ボックスコラプスとは何でしょうか?親ボックスの内側にあるべき要素が外側にあります。第二に、箱は...

CSS の border 属性と display 属性の使い方の簡単な分析

境界プロパティの概要borderプロパティは要素の境界を設定します。境界線の3要素は、太さ、線の種類...

React Diff Principle の詳細な分析

目次差分アルゴリズムレイヤーごとの比較同じタイプのコンポーネントを比較する同じタイプの要素の比較子ノ...