【Sass】@extendの使い方

Sassには様々な機能がありますが、その中の1つ「@extend」という機能を使ってみましょう。@extend（エクステンド）がどのような機能であるかというと、あるセレクタで指定したスタイルを他のセレクタに継承させて同じスタイルを適用させることができます。実際にどのように使用するのか見てみます。

@extendの記述方法

//Sass
.hoge1 {
  margin: 10px;
  color: #ff0;
}
.hoge2 {
  padding-bottom: 5px;
  @extend .hoge1;
}

//cssコンパイル
.hoge1,
.hoge2 {
  margin: 10px;
  color: #ff0;
}
.hoge2 {
  padding-bottom: 5px;
}

同じスタイルを継承させるためには、「@extend セレクタ;」の形式で指定します。上記は簡単な例ですが、.hoge1で指定されたスタイルを「@extend .hoge1;」と記述して.hoge1のスタイルを.hoge2に継承させています。これをcssに展開させると同じスタイルが指定されたセレクタがグルーピングされて反映されます。この程度であれば、使う必要はないかもしれませんが、ソースコードが長くなった場合には有効な手段になるかと思います。
ただし、@media内では使用することができないので注意が必要です。

@extend専用セレクタ

先程、例に挙げた場合だと、cssを生成する際に継承元となるセレクタも毎回生成されることになります。場合によっては、継承元のセレクタは生成する必要がない場合もあるでしょう。そのような場合に利用できるものが、プレースホルダーセレクタという@extend専用のセレクタになります。
これは、通常使用するクラスセレクタやIDセレクタのドットやシャープの代わりにパーセントの記号を先頭に付与させることで使用することができます。

%example {
  margin-bottom: 20px;
  font-weignt: bold;
}
.hoge1 {
  @extend %example;
  padding: 10px;
}
.hoge2 {
  @extend %example;
  padding: 20px;
}

//cssコンパイル
.hoge1,
.hoge2 {
  margin-bottom: 20px;
  font-weight: bold;
}
.hoge1 {
  padding: 10px;
}
.hoge2 {
  padding: 20px;
}

このように、%exampleというセレクタはcssには生成されずに各セレクタのみに%exampleで指定したスタイルが適用されます。