【CSS Modules】var()関数の使い方
var()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
var()関数は、CSSカスタムプロパティ（CSS変数とも呼ばれます）に定義された値を参照し、適用するために使用する関数です。この関数を用いることで、スタイルシート全体で繰り返し使用される色やサイズ、フォントなどの値を一元的に管理し、再利用することが可能になります。
例えば、ウェブサイトのメインカラーをカスタムプロパティとして定義しておけば、そのメインカラーを複数の場所で使用する際に、すべてをvar()関数で参照できます。もしメインカラーを変更したい場合でも、カスタムプロパティの定義箇所を一度修正するだけで、参照しているすべての場所のスタイルが自動的に更新されるため、コードの保守性や一貫性が大幅に向上します。
また、var()関数は、カスタムプロパティが定義されていない、または無効な値を持っている場合に備えて、代替となるフォールバック値（予備の値）を指定する機能も持っています。これにより、予期せぬエラーを防ぎ、より堅牢なスタイル設定を行うことができます。`
カスタムプロパティはCSSのカスケード（継承）の原則に従うため、定義された要素やその子孫要素にわたってその値が適用されます。この特性とvar()関数を組み合わせることで、大規模なプロジェクトにおけるCSSの管理を効率化し、開発プロセスの生産性を高めることができます。この関数は、CSSのスタイルをより柔軟かつダイナミックに制御するための強力なツールです。
構文(syntax)
1:root { 2 --main-text-color: #333; 3} 4 5.element { 6 color: var(--main-text-color); 7}
引数(parameters)
--custom-property-name, fallback = none
- --custom-property-name: 値を取得したいカスタムプロパティの名前
- fallback: --custom-property-name で指定したカスタムプロパティが存在しない場合に、代わりに使用されるフォールバック値（省略可能）
戻り値(return)
CSS Value
var()関数は、CSSカスタムプロパティ（変数）で定義された値を返します。これにより、動的な値の指定や再利用が可能になります。