CSS変數(shù)（公式にはカスタムプロパティとして知られています）は、1回設定できるユーザー定義値であり、コードベース全體で何度も使用できます。色、フォント、サイズ、アニメーションの値を簡単に管理し、Webアプリケーション全體で一貫性を確保できます。 たとえば、

ブランドの色をCSSプロパティ（-primarycolor：＃7232FA）として設定し、ブランドの色を使用するコンポーネントまたはスタイルでこの値を使用できます（background：var（ - primarycolor）;）。

クリーナーと非繰り返しのコードを提供することに加えて、CSS変數(shù)を使用して、カラーパレットを構(gòu)築し、応答性を向上させ、動的タイプシステムを作成できます。

この投稿は、私のガイドであるCSS Masterから抽出されています。また、ワークフローを改善し、より良いアプリケーションを構(gòu)築するツールを習得することも學びます。

キーテイクアウト

CSSカスタムプロパティの概要：CSS変數(shù)、??またはカスタムプロパティにより、開発者は1回値を定義し、スタイルシート全體でそれらを再利用できるようにします。これにより、色、フォント、サイズ、アニメーション値の管理を簡素化することにより、Webアプリケーション全體のコードの保守性と一貫性が向上します。カスタムプロパティは、プロジェクト全體に広く適用でき、最小限の労力で動的な更新とテーマ調(diào)整を可能にします。

CSS変數(shù)の利點とアプリケーション：繰り返しを減らすことでコードをクリーンアップするだけでなく、CSS変數(shù)は動的テーマ、レスポンシブデザイン、および系統(tǒng)的タイプスケールを作成する可能性のロックを解除します。彼らは複雑なカラーパレットとレイアウトの管理に盡力し、ユーザーの相互作用や環(huán)境條件に基づいて要素を設計するための簡単な調(diào)整を促進します。

1. 実用的な実裝と拡張機能：例を通じて、この記事では、テーマや応答性など、さまざまな目的でCSSカスタムプロパティを定義、使用、操作する方法を示しています。これは、特にReact、Angular、Vueなどのコンポーネントベースのフレームワーク內(nèi)で、スタイリング戦略を大幅に合理化する可能性を示す、メディアクエリやJavaScriptと併せてCSS変數(shù)の汎用性を強調(diào)しています。このアプローチは、ウェブインターフェイスを構(gòu)築するためのモジュール式で保守可能でスケーラブルな方法を奨勵しています。
2. CSSカスタムプロパティの定義

カスタムプロパティを定義するには、名前を選択して2つのハイフンでプレフィックスを付けます。あらゆる英數(shù)字の文字は、名前の一部になる可能性があります。ハイフン（ - ）とアンダースコア（_）文字も許可されています。幅広いユニコード文字は、カスタムプロパティ名の一部になります。これには絵文字が含まれますが、明快さと読みやすさのために、英數(shù)字の名前に固執(zhí)します。
3. 例を次に示します

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   - これはカスタムプロパティであることをCSSパーサーに示します。変數(shù)として使用すると、解析エンジンはプロパティをその値に置き換えます。

   カスタムプロパティ名は

   case-sensitiveです。つまり、-primarycolorと-primarycolorは2つの異なるプロパティ名と見なされます。これは、プロパティとバリューケースが重要ではない従來のCSSからの逸脫です。ただし、ECMAScriptの変數(shù)名のルールと一致しています。 ディスプレイやフォントなどの他のプロパティと同様に、CSSカスタムプロパティは宣言ブロック內(nèi)で定義する必要があります。一般的なパターンの1つは、次のようなルート擬似エレメントを使用してカスタムプロパティを定義することです。

   ：rootは、ドキュメントのルート要素を指す擬似要素です。 HTMLドキュメントの場合、それが要素です。 SVGドキュメントの場合、

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   カスタムプロパティを変數(shù)として使用するには、var（）関數(shù)を使用する必要があります。たとえば、-primarycolorカスタムプロパティを背景色として使用したい場合は、次のことを行います。

   カスタムプロパティの値は、バックグラウンドカラープロパティの計算値になります。

   これまで、カスタムプロパティは、標準のCSSプロパティの値を設定する変數(shù)としてのみ使用できます。たとえば、プロパティを変數(shù)として

   name> name>を保存してから再利用することはできません。次のCSSは機能しません

   また、プロパティを保存することはできません - 値

   <span>body {
   </span>    <span>background-color: var(--primarycolor);
   </span><span>}</span>

   ペア

   は変數(shù)として再利用します。次の例も無効です：

   最後に、値文字列の一部として変數(shù)を連結(jié)することはできません：

   <span><span>:root</span> {
   </span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
   </span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
   </span><span>}</span>

   CSSカスタムプロパティ対CSS変數(shù)

   「カスタムプロパテ?！工?、いつかこの機能を使用する方法を説明する將來の根拠のある名前です。ただし、これにより、CSS拡張仕様がブラウザベンダーによって実裝された場合に変更される可能性があります。その仕様では、カスタムセレクターの組み合わせ、関數(shù)、およびATルールを使用してCSSを拡張する方法を定義します。 一般に、カスタムプロパティを「変數(shù)」と呼びます。これまでに、それがそれらを使用できる唯一の方法です。理論的には、それらは完全に交換可能な用語ではありません。実際には、今のところ、彼らはそうです。この投稿では、この投稿では

   カスタムプロパティ

   <span><span>:root</span> {
   </span>    <span>--text-color: 'color: orange'; /* Invalid property value */
   </span><span>}
   </span><span>body {
   </span>    <span>var(--text-color); /* Invalid use of a property */
   </span><span>}</span>

   を使用します。それが適切な名前だからです。文が明確になったときに

   変數(shù)

   を使用します。

   <span><span>:root</span> {
   </span>    <span>--base-font-size: 10;
   </span><span>}
   </span><span>body {
   </span>    <span>font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
   </span><span>}</span>

   フォールバック値の設定

   var（）関數(shù)は最大2つの引數(shù)を受け入れます。最初の引數(shù)は、カスタムプロパティ名である必要があります。 2番目の引數(shù)はオプションですが、宣言値でなければなりません。この宣言値は、カスタムプロパティ値が定義されていないときに適用されるフォールバックまたはデフォルト値として機能します。

   次のCSSを取りましょう：

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   -accent-colorが定義されている場合、その値は＃f30であると言われます。次に、.btn__call-to-action-to-actionクラスの屬性を備えた任意のパスの充填色に、赤オレンジ色の塗りつぶしがあります。定義されていない場合、塗りつぶしは深い空の青になります。

   宣言値もネストできます。言い換えれば、変數(shù)をvar関數(shù)のフォールバック値として使用できます：
   上記のCSSでは、Books-BGが定義されている場合、背景色は-books-BGプロパティの値に設定されます。そうでない場合、バックグラウンドカラーは代わりに、Arts-BGに割り當てられた値になります。どちらも定義されていない場合、背景色はプロパティの初期値になります。この場合、透明です。

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   同様のことが、カスタムプロパティに使用されているプロパティに無効な値がある場合に発生します。次のCSSを検討してください：
   この場合、 - フッターリンクホバープロパティの値は有効な色ではありません。代わりに、フッターA：ホバーは要素の色からその色を継承します

   カスタムプロパティは、他のCSS値が解決されるのと同じように解決されます。値が無効または未定義の場合、CSSパーサーは、プロパティが継承可能な場合（色やフォントなど）、（バックグラウンドカラーのように）ない場合は初期値を使用します。

   カスケード値

   <span>body {
   </span>    <span>background-color: var(--primarycolor);
   </span><span>}</span>

   カスタムプロパティは、カスケードのルールにも付著しています。それらの値は、後続のルール：

   によってオーバーライドできます
   上記の例では、私たちの體のテキストは濃い灰色になります。セレクターごとに値をリセットすることもできます。このcssにさらにいくつかのルールを追加しましょう：
   この場合、

   要素タグに包まれたテキストはオレンジ色になります。しかし、

   または他の要素內(nèi)のテキストはまだ濃い灰色になります。

   スタイル屬性を使用してカスタムプロパティの値を設定することもできます。

   カスタムプロパティとカラーパレット

   <span><span>:root</span> {
   </span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
   </span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
   </span><span>}</span>

   カスタムプロパティは、HSLカラーパレットの管理に特に適しています。?

   HSLは、

   OpenClipartのcrazyterabyteによる

   クロマティックホイール HSLカラーシステムでは、一次色の赤、緑、青は、0度/360度、120度、240度で120度離れています。二次色（サイアン、マゼンタ、黃色）も120度離れていますが、それぞれ180度、300度、60度/420度で主要な色の反対側(cè)に座っています。三次、第四紀、その他の色は、約10度の単位で陥ります。 HSL表記を使用して記述された青は、HSL（240、100％、50％）です

   HSL引數(shù)単位 hsl（）およびhsla（）関數(shù)の最初の引數(shù)に単位のない値を使用すると、ブラウザはそれが度ユニットの角度であると想定します。ただし、サポートされているCSS角ユニットを使用できます。青は、HSL（240DEG、100％、50％）、HSL（4.188rad、100％、50％）またはHSLA（0.66Turn、100％50％）として表現(xiàn)することもできます。

   これが楽しい場所です。カスタムプロパティを使用して色相値を設定し、飽和値と明るさの値を調(diào)整することで明るい色合いと暗い色合いを設定できます。

   上記のCSSは、以下に示すパレットを提供します

   これは単純なバージョンですが、カスタムプロパティを使用して飽和値と軽さの値を調(diào)整することもできます。

   堅牢なパレット生成

   Dieter Raberは、「カスタムプロパティ、HSL、およびLittle Calc（）を使用したカラーテーマの作成」で、堅牢なパレット生成のテクニックについて説明します。

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   別のアイデアは、カスタムプロパティとCalc（）関數(shù)を組み合わせて、ベース色相から正方形の配色を生成することです。次の例で正方形の配色を作成しましょう。 A

   正方形の配色は、カラーホイールで互いに等距離にある4色で構(gòu)成されています。つまり、90度離れています。

   このCSSのビットは、以下に示すかなり熱帯風の配色を提供します。

   カスタムプロパティは、後のセクションで表示されるように、メディアクエリでもうまく機能します。 CSS変數(shù)を使用して、暗いテーマパレットを作成します

   CSSカスタムプロパティを使用して、サイト上の暗いテーマとライトテーマの両方の変數(shù)セットを定義できます。

   ページのスタイルの以下の例を見てみると、対応する色のカスタムプロパティを定義した後、さまざまなセレクターのすべてのHSL色を変數(shù)に置き換えることができます：root：

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   カスタムプロパティの適切な名前が使用されています。たとえば、-nav-bg-colorは、navのバックグラウンドの色を

   に指しますが、-nav-text-colorは navの前景/テキストの色を指します。 ??> 次に：ルートセレクターのコンテンツを複製しますが、

   dark

   値でテーマ屬性を追加します：

   このテーマは、

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   dark

   値を持つテーマ屬性が要素に追加される場合にアクティブになります。 HSL色の軽さ値を減らして暗いテーマを提供することにより、これらの変數(shù)の値を手動で再生できます。または、Invert（）やBright（）などのCSSフィルターなどの他の手法を使用できます。畫像のレンダリングを調(diào)整するために一般的に使用されますが、他の要素でも使用できます。 次のコードを追加します：root [theme = 'dark']：

   invert（）フィルターは、選択した要素（この場合のすべての要素）のすべての色を反転させます。反転の値は、パーセンテージまたは數(shù)で指定できます。 100％または1の値は、要素の色合い、飽和、および軽さの値を完全に反転させます。

   明るさ（）フィルターにより、要素がより明るくなります。値0は完全に暗い要素をもたらします。

   <span>body {
   </span>    <span>background-color: var(--primarycolor);
   </span><span>}</span>

   invert（）フィルターにより、いくつかの要素が非常に明るくなります。これらは、明るさ（0.6）を設定することでトーンダウンされます

   暗闇の程度が異なる暗いテーマ：

   JavaScriptを使用したテーマの切り替え

   ここで、JavaScriptを使用して、ユーザーが

   dark/lightボタンをクリックしたときに暗いテーマと明るいテーマを切り替えましょう。 htmlで、次のコードで閉じる前にの前にを追加します。

   document.documentelementは、ドキュメントのルートdom要素、つまりを指します。このコードは、.hasattribute（）メソッドを使用して

   テーマ

   屬性の存在をチェックし、存在しない場合はダーク値で屬性を追加し、ダークにスイッチを引き起こしますテーマ。それ以外の場合は、屬性を削除するため、光のテーマに切り替えます。

   注：これをCSSの好みの色シェーム機能と組み合わせて使用??する必要があります。これは、ユーザーのオペレーティングシステムまたはユーザーエージェント（ブラウザ）設定から明るいテーマを自動的に変更するために使用できます。これは次のセクションに示されています。

   <span><span>:root</span> {
   </span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
   </span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
   </span><span>}</span>

   カスタムプロパティとメディアクエリの使用

   メディアクエリを使用してカスタムプロパティを使用することもできます。たとえば、カスタムプロパティを使用して、明るいカラースキームとダークカラースキームを定義できます。

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   同様に、カスタムプロパティを使用して、畫面と印刷のベースフォントサイズを変更できます。

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   この場合、印刷と畫面にメディアに適したユニットを使用しています。どちらのメディアでも、畫面のピクセル、印刷ポイントの10ユニットのベースフォントサイズを使用します。また、-base-font-size：の値を使用して、ルート要素（HTML）の開始サイズを設定します。その後、REMユニットを使用して、ベースフォントサイズに比べてタイポグラフィをサイズすることができます。 JavaScriptを使用してカスタムプロパティを使用して

   覚えておいてください：カスタムプロパティはCSSプロパティであり、そのようにそれらと対話することができます。たとえば、css.supports（）APIを使用して、ブラウザがカスタムプロパティをサポートするかどうかをテストできます。

   removeProperty（）を使用して、同様に動作します。引數(shù)としてカスタムプロパティ名を渡すだけです：

   <span>body {
   </span>    <span>background-color: var(--primarycolor);
   </span><span>}</span>

   カスタムプロパティをJavaScriptの値として使用するには、プロパティ名を引數(shù)としてVAR（）関數(shù)を使用します。

   殘念ながら、スタイルオブジェクトの正方形ブラケットの構(gòu)文またはラクダに覆われたプロパティを使用してカスタムプロパティを設定することはできません。言い換えれば、どちらのdocument.body.style .-- bg-homeもdocument.body.style [' - bg-home']が機能します。

   <span><span>:root</span> {
   </span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
   </span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
   </span><span>}</span>

   カスタムプロパティとコンポーネント

   React、Angular、VueなどのJavaScriptフレームワークにより、開発者はJavaScriptを使用して、多くの場合、コンポーネントレベルで定義されるCSSで再利用可能で共有可能なブロックを作成します。

   <span><span>:root</span> {
   </span>    <span>--text-color: 'color: orange'; /* Invalid property value */
   </span><span>}
   </span><span>body {
   </span>    <span>var(--text-color); /* Invalid use of a property */
   </span><span>}</span>

   jsxで記述された反応成分の例を示します。

   JavaScript Frameworksの詳細

   <span><span>:root</span> {
   </span>    <span>--base-font-size: 10;
   </span><span>}
   </span><span>body {
   </span>    <span>font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
   </span><span>}</span>

   JavaScript Frameworksの操作について詳しく知りたい場合は、

   SitePointには、React、Angular、Vueに関する広範なリソースがあります。 Reactについては、React

   および広範なReactの記事で最初の週をチェックしてください。 Angularの場合、Angular：Your First Week

   と角度のある記事やチュートリアルがたくさんあります。 VUEについては、

   Jump Start Vue.js

   およびその他のVue記事をご覧ください

   ReactコンポーネントはCSSをJavaScriptファイルにインポートします。コンパイルされると、Field-Button.CSSの內(nèi)容がインラインでロードされます。これをカスタムプロパティで使用する1つの可能な方法は次のとおりです。

   この例では、ボタンの背景色にカスタムプロパティ（ - ボタン-BG-Color）と、ケースのデフォルトの色を使用しました。ここから、グローバルなスタイルシートで、またはスタイル屬性を介してローカルで-button-bg-colorの値を設定できます。 値をReact「Prop」として設定しましょう。 REACT

   Props（

   <span><span>.btn__call-to-action</span> {
   </span>    <span>background: var(--accent-color, deepskyblue);
   </span><span>}</span>

   プロパティの略））模倣要素屬性。それらは、データをReactコンポーネントに渡す方法です。この場合、buttonbgcolorという名前の小道具を追加します：

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   この変更をサポートするには、FieldButtongRoupを更新する必要があります

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   上記のコードでは、カスタムプロパティの名前を保持し、その価値をButtonBGColor Propの値とボタンへのスタイルの屬性に設定するボタンスチールオブジェクトを追加しました。

   スタイル屬性の使用は、おそらくCSSを書くことについて教えられたすべてのものにカウンターを?qū)g行します。 CSSのセールスポイントは、複數(shù)のHTMLドキュメントとXMLドキュメントで使用するための1つのスタイルセットを定義できることです。一方、スタイル屬性は、そのCSSの範囲を適用される要素に制限します。再利用できません。そして、カスケードを利用することはできません。

   しかし、コンポーネントベースのフロントエンドアーキテクチャでは、複數(shù)のチームが複數(shù)のコンテキストで使用することも、クライアントプロジェクト間で共有される場合もあります。そのような場合、カスケードの「グローバルスコープ」と、スタイル屬性によって提供される狹い「ローカルスコープ」を組み合わせることをお勧めします。 スタイル屬性を使用してカスタムプロパティ値を設定すると、フィールドButtongRoupコンポーネントのこの特定のインスタンス

   に効果が制限されます。しかし、標準のCSSプロパティの代わりにカスタムプロパティを使用しているため、コンポーネントとしてではなく、リンクされたスタイルシートで-button-bg-colorを定義するオプションがあります。

   結(jié)論

   カスタムプロパティ前処理者の最良の機能の1つであるVariables-bariablesを使用して、CSSに固有のものにします。カスタムプロパティを使用すると、：ができます

   再利用可能なテーマコンポーネントを作成

   さまざまなビューポートサイズとメディアのために、パディング、マージン、タイポグラフィを簡単に調(diào)整します

   CSS

   の色値の一貫性を改善します
   変數(shù)にはさまざまなアプリケーションがあり、コンポーネントベースの設計システムで特に役立ちます。
   • CSSで変數(shù)またはカスタムプロパティを使用する方法をよりよく理解できるようになりました。私の本「CSS Master」をチェックして、CSSの知識を拡張し、このようなより役立つヒントを得てください。
   • CSSカスタムプロパティに関するFAQ
   CSSカスタムプロパティとは何ですか？ CSS変數(shù)とも呼ばれるカスタムプロパティは、スタイルシートで値を保存および再利用するための開発者によって定義されたエンティティです。それらは、-main-colorのようなプレフィックスから始まり、スタイルシート全體で使用する値を割り當てることができます。 CSSカスタムプロパティを宣言するにはどうすればよいですか？

   CSSカスタムプロパティを宣言するには、-main-colorのような名前を使用します。 var（ - main-color：＃3498db）などのvar（）関數(shù)を使用して値を割り當てます。 CSSカスタムプロパティを使用することの利點は何ですか？

   CSSカスタムプロパティは、スタイルを管理するためのより柔軟で保守可能な方法を提供します。それらは、簡単なテーマ、迅速な更新、および値の集中化を可能にし、よりクリーナーとよりモジュラーコードを促進します。CSSカスタムプロパティは、単なる色以上のものに使用できますか？

   はい、CSSカスタムプロパティは、色、フォントサイズ、間隔など、さまざまな種類の値に使用できます。スタイルシートの任意の値をパラメーター化する方法を提供します。 CSSカスタムプロパティは継承されていますか？

   はい、CSSカスタムプロパティは標準継承ルールに従います。プロパティが要素上で定義されていない場合、親から値を継承します。これにより、一貫した設計システムを作成するために強力になります CSSカスタムプロパティはメディアクエリで使用できますか？

   はい、CSSカスタムプロパティはメディアクエリで使用できます。これにより、畫面サイズまたは他のメディア機能に基づいてプロパティ値を調(diào)整することにより、より動的な応答性が可能になります。

以上がCSSで変數(shù)を使用する方法：CSSカスタムプロパティの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。