ホームページ > 記事 > ウェブフロントエンド > CSS 変数 – スタイルシートの合理化
この講義では、CSS 変数 (カスタム プロパティとも呼ばれます) と、それらがスタイルシート全体で値を再利用できるようにしてコードを簡素化する方法について学びます。
CSS 変数を使用すると、色、フォント サイズ、間隔などの値を中央の場所に保存し、スタイルシート全体で再利用できます。これにより、スタイルシート全体を検索する代わりに 1 か所の値を簡単に更新できるため、コードの保守性が向上します。
CSS 変数は -- 接頭辞を付けて定義され、var() 関数を使用してアクセスできます。
CSS 変数は通常、ドキュメントの最上位を表す :root セレクターで定義されます。
:root { --primary-color: #3498db; --secondary-color: #2ecc71; --font-size: 16px; } body { font-size: var(--font-size); color: var(--primary-color); } h1 { color: var(--secondary-color); }
この例では:
特定のセレクター内の CSS 変数をオーバーライドして、コンテキスト固有の値を提供できます。
:root { --primary-color: #3498db; } .dark-mode { --primary-color: #34495e; } body { color: var(--primary-color); }
この例では、.dark-mode クラスが適用されると、--primary-color がオーバーライドされます。これにより、異なるカラー スキーム (ライト モードとダーク モードなど) を簡単に切り替えることができます。
CSS 変数はメディア クエリとうまく連携し、画面サイズに基づいて値を調整できます。
:root { --font-size: 16px; } @media (max-width: 600px) { :root { --font-size: 14px; } } body { font-size: var(--font-size); }
この例では、小さい画面では --font-size 変数が小さくなり、モバイル デバイスでテキストが読みやすくなります。
変数がブラウザーで定義されていないかサポートされていない場合に備えて、CSS 変数のフォールバック値を指定できます。
body { font-size: var(--font-size, 18px); }
ここで、--font-size が定義されていない場合、ブラウザはデフォルトで 18 ピクセルになります。
CSS 変数の最も強力な側面の 1 つは、JavaScript を使用して操作できることで、動的でインタラクティブなスタイルを作成できることです。
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
この例では、JavaScript を使用して --primary-color 変数が新しい色 (#e74c3c) に更新され、ページのスタイルが動的に変更されます。
CSS 変数は、スタイルを管理し、コードの保守性を向上させ、動的更新を可能にする柔軟な方法を提供します。 CSS 変数をワークフローに組み込むことで、開発プロセスを合理化し、より保守しやすくスケーラブルなスタイルシートを作成できます。
リドイ・ハサン
以上がCSS 変数 – スタイルシートの合理化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。