Sass・Compass clearfixの使い分け

More than 3 years have passed since last update.


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


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