Sass：extendでclearfixを楽にする

先日オブジェクト指向型CSSについて書きましたが、こちらのおさらいと応用を紹介します。

回り込み解除のための「clearfix」はWebコーダーであれば誰しも使うクラスだと思いますが、HTML内でそこかしこに clearfix が指定されることも良くあると思います。

オブジェクト指向型CSSの考え方であれば、HTML内に clearfix のクラスを記述する必要が無くなります。

ファイル構成

├css
│└style.css
├sass
│├_extend.scss
│└style.scss

上記のファイル構成を前提とします。

CSSフォルダとSassフォルダが並行に置かれたよくある構成で、Sassフォルダ内には実際に出力されるstyle.scssと、extendクラス用のファイルを配置しています。

Sass

_extend.scss

.cf:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

上記のように、_extend.scss には clearfix のみ記述しておきます。

style.scss

@import "extend";

.box {
  @extend .clearfix;
  width: 300px;
  padding: 10px;
}

まず冒頭で_extend.scssをインポートします。
ファイル名がアンダーバーから始まるものはSassはCSSに出力せず、インポート専用ファイルのような扱いとなり、インポート時はアンダーバーを省いて記述します。

そしてclearfixを適用させたいレイアウト用クラスで、extend で clearfix を呼び出します。

出力されるstyle.css

_extend.scssとstyle.scssの内容が結合され、style.cssに出力されると下記のようになります。

.clearfix:before, .box:before,
.clearfix:after,
.box:after {
  content: " ";
  display: table;
}
.clearfix:after, .box:after {
  clear: both;
}
.clearfix, .box {
  *zoom: 1;
}
.box {
  width: 300px;
}

clearfoxの宣言に box も含まれるようになりました。

これにより、HTMLソース内にclearfixの記述が不要になりソース削減のメリットがあるのと同時に、Sassファイルのソース側でもextendでclearfixを明示することで回りこみ解除を把握することも出来るようになりました。

この考え方を使いこなすことでパフォーマンスや効率化を高めることが出来ると思います。