SCSS Clearfix
I took the clearfix-mixin as defined in Twitter Bootstrap and turned the mixin into a placeholder selector. Now it's extendable like any other class and won't show up if you don't use it.
// For clearing floats like a boss h5bp.com/q
%clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
Example:
.too-much-fog {
@extend %clearfix;
// and then some...
}
Note: Placeholder-selectors were implemented in SASS 3.1
Written by Yoeran Luteijn
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Sass
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#