Sass：HTMLに「clearfix」を書くのを卒業しよう

HTMLコーディングに欠かせないclearfixですが、気付けばHTML各所にclearfixの記述が多くなることがあります。

Sassのextendを使って個別にclearfixを記述することから卒業しましょう。

CSS(Sass)

.clearfix {
  @include clearfix;
}

.box {
  @extend .clearfix;
  width: 500px;
  margin: 20px auto;
}

これでCSSは下記のように出力されます。

.clearfix, .box {
  *zoom: 1;
}
.clearfix:before, .box:before, .clearfix:after, .box:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after, .box:after {
  clear: both;
}

.box {
  width: 500px;
  margin: 20px auto;
}

「.box」の側にclearfixのプロパティが付与されるわけではなく、clearfixを定義するセレクタに「.box」が加えられます。

「.box」単体でclearfixされるので、CSSでfloatをかけているのにHTML側で「ここはclearfixしなくちゃ」みたいに考える必要が無くなり、CSSだけでfloatの解除も完結させることができます。