Sass：@extend でCSSクラスを統一しよう

あるCSSクラスをベースに、右詰めや左詰めなどバリエーション違いのクラスを作りたいというケースに @extend は使えます。

下記はSass記法例。

.box {
  width: 300px;
  height: 200px;
}
.right-box {
  @extend .box;
  float: right;
  margin: 0 0 20px 20px;
}
.left-box {
  @extend .box;
  float: left;
  margin: 0 20px 20px 0;
}

CSS側には下記のように展開されます。

.box, .right-box, .left-box {
  width: 300px;
  height: 200px;
}
.right-box {
  float: right;
  margin: 0 0 20px 20px;
}
.left-box {
  float: left;
  margin: 0 20px 20px 0;
}

一見 @mixin と大差ないように思えますが、 @mixin は記録したプロパティを使いまわすためのもので、@extend はベースのクラスと統一化するためのものと、概念に差があります。

出力されたCSSも @extend したクラス側にプロパティが書かれるわけでなく、 @extend 元のクラスに追加記述される形なので、CSSソースは @mixin より軽量化されます。