【CSS Modules】inheritsアットルール記述子の使い方
inheritsアットルール記述子の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
inheritsプロパティは、CSSの@propertyアットルール内で使用される記述子であり、カスタムプロパティ（CSS変数）が親要素から値を継承するかどうかを制御する設定を保持するプロパティです。このプロパティはtrueまたはfalseのブール値を持ちます。
inheritsがtrueに設定されている場合、そのカスタムプロパティは通常のCSSプロパティと同様に、親要素に設定された値を子孫要素が自動的に引き継ぎます。例えば、親要素に@property --primary-color { syntax: "<color>"; inherits: true; initial-value: blue; }と定義され、その後CSSで--primary-color: red;と設定された場合、子要素では明示的に設定しなくても--primary-colorの値はredとなります。
一方、inheritsがfalseに設定されている場合、カスタムプロパティは親要素の値を継承しません。この場合、その要素自体でカスタムプロパティが明示的に定義されていない限り、@propertyルールでinitial-valueが指定されていればその値を持つか、もしinitial-valueがなければ値が定義されていない状態となります。これは、特定のコンポーネント内でのみ有効なカスタムプロパティを作成したい場合や、意図しない値の伝播を防ぎ、変数のスコープを限定したい場合に非常に有用です。
このinheritsプロパティを適切に利用することで、CSSカスタムプロパティの動作をより細かく制御し、大規模なアプリケーションやコンポーネントベースの設計において、予測可能で堅牢なスタイリングシステムを構築することができます。
構文(syntax)
1inherits: <boolean>;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません