[Sass & Compass] Compass: mixin から clearfix を学ぶ
このあたりで clearfix も出てきたので、ちゃんと向き合ってみます。
Contents
つかいかた
clearfix は様々な箇所で利用するので、プレースホルダーセレクタで用意し、
- （クラスで用意する場合と違い） プレースホルダーセレクタで記述した内容は CSS に出力されない。
%clearfix {
@include clearfix;
}
extend で利用することになりますね。
- （mixinと違い）extend ではセレクターがグループ化されます。 セレクタ数制限がある IE 6, 7, 8, 9 に有効。
.item-container {
@extend %clearfix;
}
こういうメリットもあるようです。
Sassの@extendとプレースホルダーセレクタ【CSS Preprocessor Advent Calendar 2012 Day 22】 – E-riverstyle Vanguard
- プレースホルダーセレクタを使うことで、意図していない、または無駄なセレクタを出力しないよう設計できる。
追記（2015/01/27）
@extend については、こういった意見もあり。
clearfix は HTML 側に付ければ、コードも短くてすみますよね。
Compass mixin
Compass mixin には、3つの手法が定義されています。
- clearfix (
overflow: hiddenを使う手法) - legacy-pie-clearfix (clearfix と呼ばれる手法)
- pie-clearfix (new micro clearfix と呼ばれる手法)
それぞれ出力される CSS は以下の通りです。
clearfix
.clearfix {
overflow: hidden;
*zoom: 1;
}
ちなみに3つとも mixin 内で has-layout という mixin が呼ばれていますが、標準では *zoom: 1; が出力されることになります。
legacy-pie-clearfix
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
pie-clearfix
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
よく見たら、オリジナルにある :before が設定されていないですね（後述）。
歴史的経緯とその詳細
Compass リファレンスからもリンクが張られていますが英語です。
指定されているプロパティの解説も含め、下記の記事が大変参考になりました。
どう使い分けるか
clearfix (overflow: hidden) と pie-clearfix (micro clear fix) をどう使い分けるのか。
現時点では pie-clearfix (new micro clearfix) がより一般的らしい。
場数がなさ過ぎるので推測でしかないですが、やはり扱うデザインによっては overflow: hidden が不都合だからでしょうか。
ちょっと調べたところ、こんな記事を見つけました。
pie-clearfix (new micro clearfix) と :before
オリジナルのhackには、:before も指定されています。
しかし Compass の mixin では未定義です。
これに関しては、以下の解説が参考になりました。
clearfixのコンセプトである「floatを解除する」という点において、:beforeは必要ありません。
しかしIE6/7の対応や、clearfixの中にfloatを指定しない要素を頻繁に入れる場合は、:beforeを設定した方が良いかもしれません。
補遺
Compass のリファレンスには、コードが中途半端にしか記載されていない物もありますよね。
こちらに実践したCSSコードが多数載っているので、あわせて読むと理解が進みそう。