スタイルの継承

スタイルの継承を行うには、@extend文を使用します。
スタイルの継承方法は2つあり、スタイルを別途定義するプレースホルダーセレクターを使用し、その定義した名称を指定する方法と、ほかのセレクターで指定しているスタイルを継承する方法があります。

							プレースホルダーセレクター:
							%名称 {
    内容
}
継承元の指定(定義名): @extend 定義名; 継承元の指定(セレクター): @extend セレクター;

対応SASSバージョン:3.2.0+

  • ※ 既にほかのプロパティが存在する場合、コンパイル後はセレクターが分かれてしまうことに注意してください。

サンプルコード

プレースホルダーセレクターによる指定

SCSS

コンパイル後:CSS

セレクターによる指定

  • ※ スペースなど子孫要素を指定することはできません。

SCSS

コンパイル後:CSS

子孫要素が存在するセレクターで親要素を指定した場合は、次のようになります。
(入れ子の場合でも同じ結果結果です。)

SCSS

コンパイル後:CSS

子孫要素が存在するセレクターで親要素と子孫要素をそれぞれ指定した場合は次のようになります。

SCSS

コンパイル後:CSS

SASS・SCSS逆引きリファレンス一覧へ戻る