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.