LoginSignup
11

More than 5 years have passed since last update.

posted at

Sass・Compass clearfixの使い分け

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を使う

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
11