Sass の@extendの使い方 – スタイルを引継いでコードが短くなる

Sass で＠extend（エクステンド/拡がる）をつかうと、指定したセレクタ（クラスやIDなど）のスタイルを引き継ぐことができます。
設定を引き継ぐとは、同じスタイルを適用するということです。
## エクステンドの使い方

セレクタa {
  スタイル;
}

セレクタb {
  @extend セレクタa
}

セレクタa, セレクタb {
  スタイル;
}

スタイルを引き継ぎたい「セレクタ名」を指定しています。
`@extend`のあとに「半角スペース」を空け、スタイルを引き継ぎたい「セレクタ名」を指定します。

コンパイルすると「セレクタb」と`@extend`に指定した「セレクタa」がグループ化されます。
これで、「セレクタa」のスタイルが「セレクタb」に引き継がれ、同じ設定が適用されました。

.a {
	width: 100px;
}
.b {
	@extend .a;
}

.a, .b {
width: 100px;
}

設定を引き継ぎたいクラスに「クラス`a`」を指定します。

コンパイルすると「クラスa」と「クラスb」がグループ化されました。
これで、「クラスa」のスタイルの`width: 100px`が「クラスb」に引き継がれました。

## エクステンドを指定したセレクタにスタイルがある場合そのまま残る
先程の例では、`@extend`を指定したクラスには何もスタイルがありませんでした。
`@extend`を指定したクラスにスタイルがある場合、コンパイルされるとそのまま残ります。

.a {
  width: 100px;
}

.b {
  height: 100px;
@extend .a;
}

.a, .b {
  width: 100px;
}

.b {
  height: 100px;
}

「クラスb」に`height: 100px;`を指定します。
引き継ぎたいクラスに「クラスa」を指定します。

「クラスa」と「クラスb」がグループ化されました。
これで、「クラスa」のスタイルの`width: 100px`が「クラスb」に引き継がれました。

「クラスb」のスタイルの`height:100px;`はコンパイルしたあとも残ります。

## エクステンドを2つ以上指定した場合全て引き継ぐ
`@extend`を2つ以上指定した場合、2つの設定を引き継ぐことができます。

.a {
  width: 100px;
}
.b {
  height: 100px;
}
.c {
  font-size: 16px;
@extend .a;
@extend .b;
}

.a, .c {
  width: 100px;
}
.b, .c {
  height: 100px;
}
.c {
  font-size: 16px;
}

「クラスc」に`font-size: 16px`を指定します。
「クラスc」にスタイルを引き継ぎたいクラスに「クラスa」と「クラスb」を指定します。

「クラスa」と「クラスc」がグループ化されます。
「クラスc」に「クラスa」のスタイルの`width: 100px;`が引き継がれます。

「クラスb」と「クラスc」がグループ化されます。
「クラスc」に「クラスb」のスタイルの`height: 100px;`が引き継がれます。

「クラスc」のスタイルの`font-size: 16px`がそのまま残ります。

## エクステンドに指定したスタイルにもエクステンドが指定してある場合全て引き継ぐ
エクステンドに指定したスタイルにもエクステンドが指定してある場合、全てのスタイルを引き継ぎます。

.a {
	width: 100px;
}
.b {
	height: 100px;
	@extend .a;
}
.c {
	font-size: 16px;
	@extend .b;
}

.a, .b, .c {
  width: 100px;
}
.b, .c {
  height: 100px;
}
.c {
  font-size: 16px;
}

「クラスb」にスタイルを引き継ぎたいクラスに「クラスa」を指定します。

「クラスc」にスタイルを引き継ぎたいクラスに「クラスb」を指定します。
「クラスb」のスタイルを引き継ぐということは、`@extend .a;`も引き継ぐことになります。
「クラスc」にスタイルを引き継ぎたいクラスに「クラスa」が指定されているのと同じになります。

「クラスa」と「クラスb」と「クラスc」がグループ化されます。
「クラスb」と「クラスc」に「クラスa」のスタイルの`width: 100px;`が引き継がれます。

「クラスb」と「クラスc」がグループ化されます。
「クラスc」に「クラスb」のスタイルの`height: 100px;`が引き継がれます。