Sass・Compassでclearfixを使う

Compassにはいろいろなmixinが用意されている
sassを書くとき@import "compass";で最初にcompassをインポートしてやれば使えるようになる

clearfixする

@include clearfix;をつけると自動でoverflow: hidden;をcssとして吐き出してfloatを解除してくれる
通常はこれだけ使うけど、レイアウトによってはoverflow: hidden;してほしくない
そんなときはpie-clearfix

mixinのclearfix

Compass mixinには3つのclerafixが定義されている

clearfix
legacy-pie-clearfix
pie-clearfix

それぞれ出力されるcssはというと
clearfix

css

.hoge {
  overflow: hidden;
  *zoom: 1;
}

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;
}

Sass・Compassでclearfixを使う

clearfixする

mixinのclearfix

ということで、ocerflow: hidden; させたくないときはpie-clearfixを使う