[Sass & Compass] Compass: mixin から clearfix を学ぶ

このあたりで clearfix も出てきたので、ちゃんと向き合ってみます。

CSS: div box を横並びにする | deadwood

つかいかた

clearfix は様々な箇所で利用するので、プレースホルダーセレクタで用意し、

目指せSassマスター!デザイナーがすぐ実践出来る基本テクニック12連発 | 株式会社LIG

  • (クラスで用意する場合と違い) プレースホルダーセレクタで記述した内容は CSS に出力されない。
%clearfix {
  @include clearfix;
}

extend で利用することになりますね。

Sass解説 – extend, mixin, function | MONSTER DIVE【モンスターダイブ】

  • (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; が出力されることになります。

Compass Hacks | Compass Documentation

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) をどう使い分けるのか。

overflow: hidden

現時点では 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コードが多数載っているので、あわせて読むと理解が進みそう。