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

公開日: 2014/07/23
更新日: 2018/11/14

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

[markdown]
> [CSS: div box を横並びにする | deadwood](https://www.d-wood.com/blog/2014/07/17_6465.html)

## つかいかた

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

> [目指せSassマスター！デザイナーがすぐ実践出来る基本テクニック12連発 | 株式会社LIG](http://liginc.co.jp/web/html-css/css/59325#tq11)

* （クラスで用意する場合と違い）プレースホルダーセレクタで記述した内容は CSS に出力されない。

“`css
%clearfix {
@include clearfix;
}
“`

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

> [Sass解説 – extend, mixin, function | MONSTER DIVE【モンスターダイブ】](http://www.monster-dive.com/blog/web_creative/20140222_001115.php)

* （mixinと違い）extend ではセレクターがグループ化されます。セレクタ数制限がある IE 6, 7, 8, 9 に有効。

“`css
.item-container {
@extend %clearfix;
}
“`

こういうメリットもあるようです。

> [Sassの@extendとプレースホルダーセレクタ【CSS Preprocessor Advent Calendar 2012 Day 22】 – E-riverstyle Vanguard](http://blog.e-riverstyle.com/2012/12/sassextendcss-preprocessor-adv.html)

* プレースホルダーセレクタを使うことで、意図していない、または無駄なセレクタを出力しないよう設計できる。

追記（2015/01/27）

`@extend` については、こういった意見もあり。
`clearfix` は HTML 側に付ければ、コードも短くてすみますよね。

Sass/Compass よくあるトラブルと解決方法・回避方法 from Maboroshi.inc

## Compass mixin

Compass mixin には、3つの手法が定義されています。

> * [Compass Clearfix | Compass Documentation](http://compass-style.org/reference/compass/utilities/general/clearfix/)

* clearfix (`overflow: hidden` を使う手法)
* legacy-pie-clearfix (clearfix と呼ばれる手法)
* pie-clearfix (new micro clearfix と呼ばれる手法)

それぞれ出力される CSS は以下の通りです。

### clearfix

“`css
.clearfix {
overflow: hidden;
*zoom: 1;
}
“`

ちなみに3つとも mixin 内で `has-layout` という mixin が呼ばれていますが、標準では `*zoom: 1;` が出力されることになります。

> [Compass Hacks | Compass Documentation](http://compass-style.org/reference/compass/utilities/general/hacks/#mixin-has-layout-zoom)

### legacy-pie-clearfix

“`css
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: “\0020”;
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
“`

### pie-clearfix

“`css
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}
“`

よく見たら、オリジナルにある `:before` が設定されていないですね（後述）。

## 歴史的経緯とその詳細

Compass リファレンスからもリンクが張られていますが英語です。
指定されているプロパティの解説も含め、下記の記事が大変参考になりました。

> * [floatを解除する手法のclearfix と次世代のレイアウトの話｜Web Design KOJIKA17](http://kojika17.com/2013/06/clearfix-2013.html)
> * [「clearfix」についてちょっと考えてみた。 | Tips Note](http://www.tam-tam.co.jp/tipsnote/html_css/post192.html)

## どう使い分けるか

clearfix (`overflow: hidden`) と pie-clearfix (micro clear fix) をどう使い分けるのか。

### overflow: hidden

現時点では pie-clearfix (new micro clearfix) がより一般的らしい。

> * [今日から使える！ Sass/compass ゆるめ勉強会](http://www.slideshare.net/yuka2py/sasscompass-28389532)

場数がなさ過ぎるので推測でしかないですが、やはり扱うデザインによっては `overflow: hidden` が不都合だからでしょうか。
ちょっと調べたところ、こんな記事を見つけました。

> * [みなさん初めまして。株式会社LIG [リグ]http://liginc.co.jp/リグさんのWEBサイトはCSS3の使い方がとても上手いので時間のある時に拝見させてもらっています。そこで1点CSS3の使い方でどうしても分からない事があったので、もし知っている方がいましたら知恵を… – W3Q](http://w3q.jp/t/4594)

### pie-clearfix (new micro clearfix) と :before

オリジナルのhackには、:before も指定されています。
しかし Compass の mixin では未定義です。

> * [A new micro clearfix hack – Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)

これに関しては、以下の解説が参考になりました。

> * [floatを解除する手法のclearfix と次世代のレイアウトの話｜Web Design KOJIKA17](http://kojika17.com/2013/06/clearfix-2013.html)
>
> clearfixのコンセプトである「floatを解除する」という点において、:beforeは必要ありません。
> しかしIE6/7の対応や、clearfixの中にfloatを指定しない要素を頻繁に入れる場合は、:beforeを設定した方が良いかもしれません。

## 補遺

Compass のリファレンスには、コードが中途半端にしか記載されていない物もありますよね。
こちらに実践したCSSコードが多数載っているので、あわせて読むと理解が進みそう。

> * [Compass のミックスイン | Web Design Leaves](http://www.webdesignleaves.com/wp/htmlcss/675/)
[/markdown]