CSSカスタムプロパティの完全なガイド（変数）

CSSカスタムプロパティ（CSS変数）は、重複したCSS値を置き換え、トピックスイッチング、コンポーネント分離、およびレスポンシブデザインを実装する、ネイティブ、動的、JavaScript-操作可能なスタイルの値です。 1。var（）関数（バックグラウンドカラー：var（ - プライマリカラー）など）でそれらを呼び出すroot（-primary-color：＃3498dbなど）のグローバル変数の定義を宣言します。 2。カスケードと継承をサポートし、コンポーネントまたはメディアクエリ（@media modified -gapなど）で上書きすることができます。 3. javascript（document.documentelement.style.setproperty（ ' - プライマリカラー'、 'hotpink'など）を介して動的に更新でき、トピックの切り替え、ユーザーの好みの設定、アニメーションの相互作用に適しています。 Kebabケースを使用して名前を付け、代替値（var（ - テキスト、黒など）を提供する）に注意し、円形の参照を避けてください。

CSSカスタムプロパティ（多くの場合、CSS変数と呼ばれる）は、スタイルシート全体で値を保存および再利用できる強力な機能です。プリプロセッサ変数（SASSのような）とは異なり、それらはCSSのネイティブであり、動的であり、JavaScriptで操作できます。 CSSで同じ色または間隔の値を何十回も繰り返したことがあるなら、カスタムプロパティがソリューションです。

基本から高度なユースケースまで、知っておくべきすべてのものがあります。

cssカスタムプロパティとは何ですか？

カスタムプロパティは、ダブルダッシュ（ -- ）プレフィックスを使用して宣言されます。

 ：根 {
  -Primary-Color：＃3498db;
   - 間隔：1rem;
}

• :rootグローバル変数を定義するのに最適な場所です（すべての要素に適用されます）。
• var()関数を使用してそれらにアクセスします：

 。ボタン {
  バックグラウンドカラー：var（ - プライマリカラー）;
  パディング：var（ - 間隔）;
}

彼らは、通常のCSSプロパティと同様に、カスケードと継承であり、コンポーネントまたはメディアクエリごとにそれらをオーバーライドできます。

？なぜそれらをSASS/LESS変数で使用するのですか？

例：ボタンでテーマを変更してJSでクリックします。

 document.documentelement.style.setProperty（ ' - プライマリカラー'、 'hotpink'）;

？インスタントビジュアルアップデート - 再コンパイルは必要ありません。

？実際のユースケース

1。テーマの切り替え

テーマ値を保存します:root 、次にそれらをオンデマンドに交換します：

 ：根 {
  -BG：#ffff;
   - テキスト：＃333;
}

[data-theme = "dark"] {
  -BG：＃222;
   - テキスト：＃f5f5f5;
}

体 {
  背景：var（ -  bg）;
  色：var（ - テキスト）;
}

JSを介してトグル：

 document.body.dataset.theme = 'dark';

2。コンポーネントレベルの変数

再利用可能なコンポーネントのスタイルを分離します：

 .card {
   - カードパッジング：1.5rem;
   - カードボーダー：1PX SOLID #DDD;

  パディング：var（ - カードパッジング）;
  境界線：var（ - カードボーダー）;
}

これで、各.cardインスタンスは、他の人に影響を与えることなく、独自のパディングや境界線をオーバーライドできます。

3。レスポンシブデザイン

メディアクエリを使用して変数を変更します。全体のルールではありません。

 ：根 {
  -gap：1rem;
}

@media（min-width：768px）{
  ：根 {
    -GAP：2REM;
  }
}

.grid {
  ギャップ：var（ - ギャップ）; / *自動的に更新 */
}

ブレークポイントごとにすべてのgap宣言を書き換えるよりもクリーナー。

⚠️一般的な落とし穴とヒント

• 変数が未定義の場合に備えて、常にフォールバックを提供します。

  色：var（ - テキスト、ブラック）; / *ブラックif -textが設定されていない */

• カメルケースなし- ケバブケースに焦げ付く（ --main-colorではなく、 --mainColor ）。

• 円形の参照を避けてください- これは壊れます：

   -a：var（ -  b）;
  -B：var（ -  a）; /*？無限ループ */

• アニメーションで使用しますか？はい - しかし、プロパティが補間をサポートしている場合のみ（ opacity 、 displayはなく）。

？ショ和ボーナス：JavaScript統合

カスタムプロパティを簡単に読み取り、書き込みます：

 // 読む
getComputedStyle（document.documentelement）
  .getPropertyValue（ ' - プライマリカラー'）;

// 書く
document.documentelement.style.setProperty（ ' - プライマリカラー'、 'パープル'）;

これを使用してください：

• ユーザー設定（テーマ、フォントサイズ）
• A/BテストUIバリアント
• JSで値をアニメーション化する（例えば、Parallelax Effects）

それでおしまい！
CSSカスタムプロパティは、ドライコードだけでなく、動的、保守可能な、インタラクティブなスタイルを有効にします。小さく起動：繰り返し色または間隔の値を交換します。次に、完全なテーマまたはレスポンシブロジックにスケールアップします。

ビルドステップはありません。依存関係はありません。ちょうど近代的なネイティブCSS。

以上がCSSカスタムプロパティの完全なガイド（変数）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。