Last Updated: February 25, 2016
·
2.8K
· yoeran

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