Sass / SCSS Mixin for Clearfix - best approach?

Question

I want to remove the clearfix class from my HTML and include a clearfix mixin in my SCSS (Rails 3.1 application). What is the best approach to this?

Answer 1

To achieve less code output by using @extend, define clearfix as placeholder (here just for modern browsers w/o IE 6+7):

Sass code:

%clearfix {
    &:after {
        content: " ";
        display: block;
        clear: both;
    }
}

/* Use above defined placeholder in the selector(s) of your needs via @extend: */
#container {
    position: relative;
    min-width: 42.5em;
    @extend %clearfix;
}

CSS output will be:

#container:after {
    content: " ";
    display: block;
    clear: both;
}
#container {
    position: relative;
    min-width: 42.5em;
}