Compass Placeholders

This is about performance and file size.

Pie Clearfix

.my-class {
  *zoom: 1;
}
.my-class:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

Compass

@import "compass";

.my-class {
  @include pie-clearfix;
}

3 Times Compass

@import "compass";

.my-class {
  @include pie-clearfix;
}
.another-class {
  @include pie-clearfix;
}
.class-42 {
  @include pie-clearfix;
}

3 Times Compass

.my-class {
  *zoom: 1;
}
.my-class:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
.another-class {
  *zoom: 1;
}
.another-class-class:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
.class-42 {
  *zoom: 1;
}
.class-42:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

Compass Placeholders

@import "compass";
@import "compass-placeholders";

.my-class {
  @extend %pie-clearfix;
}
.another-class {
  @extend %pie-clearfix;
}
.class-42 {
  @extend %pie-clearfix;
}

Output

.my-class,
.another-class,
.class-42 {
  *zoom: 1;
}
.my-class:after,
.another-class:after,
.class-42:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

Setup

gem install compass-placeholders

# compass.rb
require "compass-placeholders"

# your-stylesheet.scss
@import "compass";
@import "compass-placeholders";