もういちどSassの@extendについて復習する

@mxinや@extendはSassの便利な機能はありますが、使い方によってはメンテナンス性を下げたり、意図していないことが起きてしまいます。
今回は@extendの復習をします。

@extendとは

一言でいえば、スタイルの継承をすることができます。
使い方を見ると分かりやすいはずです。

@extendの使い方

SCSSで、

// 継承元
.button {
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  display: inline-flex;
  font-size: 14px;
  height: 32px;
  padding-left: 10px;
  padding-right: 10px;
}

.button-info {
  @extend .button;
  background-color: #3273dc;
  border-width: 0;
  color: #fff;
}

.button-warning {
  @extend .button;
  background-color: #ffdd57;
  border-width: 0;
  color: #fff;
}

と書いてコンパイルすると、CSSでは

.button, .button-info, .button-warning {
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  display: inline-flex;
  font-size: 14px;
  height: 32px;
  padding-left: 10px;
  padding-right: 10px; }

.button-info {
  background-color: #3273dc;
  border-width: 0;
  color: #fff; }

.button-warning {
  background-color: #ffdd57;
  border-width: 0;
  color: #fff; }

と出力されます。

@extendはセレクタを継承をして、更に拡張することができます。
出力を見ると、セレクタがグルーピングされるのが分かると思います。
一見便利ですが、注意して使わないと順序がおかしくなったり物凄い数のセレクタが生成されていまいます。
参考にしているサイトには、@extendは使わないようにというアドバイスがあり、存在しない関連性を無理に作ってはいけないとのことです。

参考サイト

@extendを使うべき時、@mixinを使うべき時