エクステンドの基本 継承
すでに定義されたルールセットを別のルールセットから「@extend セレクタ;」で継承することができる。コンパイル後にはすでに定義したブロックと、継承したブロックがグループ化されることがわかる。
その他の使い方
複数の継承も問題なく行えるが、継承する数が増えてプロパティがバッティングした場合はCSSの個別性の計算通りに、後から書かれたスタイルが優先される。
例えば.attに書いたスタイルを.attBoxで一度継承し、.notesで.attBoxを継承することで、.att, .attBox, .notesのスタイルグループと、.att=.attBoxの場合は.attBox(.attとの差分スタイル), notesのスタイルグループが生成される。
- // クラスセレクタ（.class { ... }）
- // タイプセレクタ（small { ... }）
- // IDセレクタ（#selectorID { ... }）
- // 連結セレクタ（.pd.bd { ... }）
- // 属性セレクタ（[type="text"] { ... }）
- // 疑似クラス（a:hover { ... }）
- // 疑似要素（p::first-line { ... }）
- // 子孫セレクタ（.item .child { ... }）
- // 子セレクタ（main > article { ... }）
- // 隣接セレクタ（h2 + h3 { ... }）
- // 関節セレクタ（h3 ~ h3 { ... }）
継承もとのセレクタもコンパイル後には継承先のスタイルと合わせてグループ化されて出力される。継承元のスタイルが不要な場合はエクステンド専用のプレースホルダーセレクタを使用する。
- @mediaの外で定義したエクステンドを@media内で継承 → エラーになる
- @mediaの内で定義したエクステンドを@media内で継承 → コンパイル可
- @mediaの内で定義したエクステンドを@media外で継承 → エラーにならないが、継承先のルールセットは@media内に展開される
存在しないセレクタにたいしてエクステンドを使った場合にでる警告を出さない様にする。このフラグがあればコンパイルエラーにならずスタイルが展開される。
コメントを残す