Sassの@extendでclearfixを使いまわす

CSSで多用される、レイヤー内でのfloat解除するためのclearfixですが、通常だと下記のようにレイヤーごとにclearfixクラスを付与させるケースが多いと思います。

<div class="box clearfix">～</div>

もちろんこれは間違いではありませんが、Sassの@extend記法を使うことでclearfixクラスを付与せず楽に書くことができます。

Sass

.clearfix {
  *zoom: 1;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
.box {
  @extend .clearfix;  //.clearfixにextend
  padding: 10px;
  background: #ccc;
}

出力CSS

.clearfix, .box {
  *zoom: 1;
}
.clearfix:after, .box:after {
  content: "";
  display: table;
  clear: both;
}
.box {
  padding: 10px;
  background: #ccc;
}

「box」のプロパティ内でclearfixを指定したextendを加えることで、clearfixのセレクタに「box」も定義されることになります。そのため下記のようにHTML側からclearfixを呼び出す必要は無くなり、clearfixの付け忘れのレイアウト崩れを避けられます。

<div class="box">～</div>