2-5. @extendを使ったスタイルの継承

1.スタイルを継承する

継承とは、一度作ったオブジェクトを、他のオブジェクトが引き継ぐという意味の用語です。Sassでは一度作ったスタイルを、他のセレクタにも引き継いで利用できるということが出来ます。

サンプルのコードを見てみましょう。

.block{
  border: solid 1px #000;
  padding: 20px;
}

.item{
  @extend .block;
  color: #f00;
}

.blockで記述したスタイルを、.itemでも引き継いで利用するというふうにしてみました。「@extend」のあとにセレクタを指定すると継承ができます。

コンパイルしてみます。

.block, .item {
  border: solid 1px #000;
  padding: 20px;
}

.item {
  color: #f00;
}

.blockのスタイルが、.itemのスタイルにも引き継がれました。

2.どんな場面で継承を使うのか？

このような3種類のボタンがあったとします。どれも同じサイズで角丸になっています。.buttonのスタイルを継承して、background-colorだけ変えれば3つのボタンが作れそうです。

@extendを使って記述してみます。

.button{
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #9B9B9B;  
}

.button-submit{
  @extend .button;
  background: #4A90E2;
}

.button-cancel{
  @extend .button;
  background: #FF0000;
}

コンパイルしてみましょう。

.button, .button-cancel, .button-submit {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #9B9B9B;
}

.button-submit {
  background: #4A90E2;
}

.button-cancel {
  background: #FF0000;
}

例えばボタンの大きさ、角丸のサイズなどが変わったときに、継承元の.buttonのスタイルを変更すれば、他のボタンにもスタイルが継承されます。

3.継承の連鎖

一度引き継がれた継承を、さらに次のスタイルに継承させることもできます。

.block→.block-red→.block-red-largeというふうに継承させます。

.block{
  width: 100px;
  height: 100px;
  border: solid 1px #000;
}

.block-red{
  @extend .block;
  background: red;
}

.block-red-large{
  @extend .block-red;
  width: 300px;
  height: 300px;
}

コンパイルしてみます。

.block, .block-red, .block-red-large {
  width: 100px;
  height: 100px;
  border: solid 1px #000;
}

.block-red, .block-red-large {
  background: red;
}

.block-red-large {
  width: 300px;
  height: 300px;
}

4.プレースホルダーセレクタを利用する

プレースホルダーセレクタというのは@extend専用のセレクタです。セレクタ名の前に「%」を付けます。

%block{
  width: 100px;
  height: 100px;
  border: solid 1px #000;
}

.block-red{
  @extend %block;
  background: red;
}

.block-blue{
  @extend %block;
  background: blue;
}

コンパイルしてみます。

.block-blue, .block-red {
  width: 100px;
  height: 100px;
  border: solid 1px #000;
}

.block-red {
  background: red;
}

.block-blue {
  background: blue;
}

※※注意※※

• メディアクエリー内では@extendが利用できません。
• 子セレクタ・子孫セレクタ・隣接セレクタ・関節セレクタを継承することはできません。