Sassを使った効率的CSSコーディング術

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

「継承」というプログラミング言語があります。これはオブジェクト指向という考え方の用語の1つで、あるオブジェクトが他のオブジェクトの性質を引き継ぐという意味の言葉です。Sassでは、一度作ったスタイルを、他のセレクタにも引き継ぐという意味で、スタイルの継承ができます。

  • HTML・CSS

公開日:2019/06/11最終更新日:2019/06/11

スポンサーリンク

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が利用できません。
  • 子セレクタ・子孫セレクタ・隣接セレクタ・関節セレクタを継承することはできません。

理解度チェック

スポンサーリンク

このレッスンの著者