スタイルの継承
スタイルの継承を行うには、@extend
文を使用します。
スタイルの継承方法は2つあり、スタイルを別途定義するプレースホルダーセレクターを使用し、その定義した名称を指定する方法と、ほかのセレクターで指定しているスタイルを継承する方法があります。
プレースホルダーセレクター:%名称 {
継承元の指定(定義名):
内容
}@extend 定義名;
継承元の指定(セレクター):@extend セレクター;
対応SASSバージョン:3.2.0+
- ※ 既にほかのプロパティが存在する場合、コンパイル後はセレクターが分かれてしまうことに注意してください。
サンプルコード
プレースホルダーセレクターによる指定
SCSS
コンパイル後:CSS
セレクターによる指定
- ※ スペースなど子孫要素を指定することはできません。
SCSS
コンパイル後:CSS
子孫要素が存在するセレクターで親要素を指定した場合は、次のようになります。
(入れ子の場合でも同じ結果結果です。)
SCSS
コンパイル後:CSS
子孫要素が存在するセレクターで親要素と子孫要素をそれぞれ指定した場合は次のようになります。
SCSS
コンパイル後:CSS