Introducing Compass Placeholders

I’ve been using Compass for years. For CSS3 it makes my code more readable, maintainable and I don’t have to remember all the -webkit’s, -moz’s, etc.

Let’s say I want to have a pie clearfix I might know what it does, but I don’t want to have to remember or even type this:

.my-class {
  *zoom: 1
}

.my-class:after {
  content: "";
  display: table;
  clear: both;
}

Compass just makes it easy and readable:

@import "compass";

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

Great.

Don’t Repeat Yourself

And don’t let Compass repeat itself.

@import "compass";

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

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

Would result in:

.my-class {
  *zoom: 1;
}

.my-class:after {
  content: "";
  display: table;
  clear: both;
}

.another-class {
  *zoom: 1;
}

.another-class:after {
  content: "";
  display: table;
  clear: both;
}

Pretty much stuff.

Welcome Compass Placeholders

Compass Placeholders is a tiny Ruby gem wrapping Compass’ mixins into Sass %placeholders.

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

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

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

Which just results in:

.my-class,
.another-class {
  *zoom: 1;
}

.my-class:after,
.another-class:after {
  content: "";
  display: table;
  clear: both;
}

There are way more placeholders. Check out the README to find out more.

Missing something? Just open a new issue on Github or send a pull request.