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?

I am thinking of just taking the HTML 5 Boilerplate clearfix and turning it into a mixin, then @including it within the CSS for elements that need clearfixing.

Copied from HTML5 Boilerplate:

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin padding-bottom-of-page */
.clearfix { zoom: 1; }

Is there a drawback to this? Is there a better way? Can I safely remove clearfix from my HTML markup this way?

Solution 1

I should probably have added - this is the solution I came up with. I am still pretty new to all this so I don't know if this will actually do the same job as setting an element's class to clearfix and using the HTML5 boilerplate code above.

@mixin clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020"; 
        display: block; 
        height: 0; 
        overflow: hidden; 
    }
    &:after {
        clear: both;
    }
}

Edit: It's best to use @extend instead of a mixin as it will produce much less CSS code. Also, it's useful to use a silent class (denoted by %) when using @extend. This prevents unexpected CSS rules and eliminates the rule you're extending if it's not being used directly.

%clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

#head {
    @extend %clearfix;
    padding: 45px 0 14px; margin: 0 35px 0;
    border-bottom: 1px solid $border;
}

Solution 2

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;
}

Solution 3

// source http://www.alistapart.com/articles/getting-started-with-sass/
// http://nicolasgallagher.com/micro-clearfix-hack/

    @mixin clearfix {
     // For modern browsers
      &:before,
      &:after {
        content:" ";
        display:table;
      }

      &:after {
        clear:both;
      }

      // For IE 6/7 (trigger hasLayout)
      & {
        *zoom:1;
      }
    }

Solution 4

Why not use the Compass framework? It already provides mixins for clearfix among a host of other useful mixins and utilities. It's always better to look for existing tools rather than to have to maintain additional code yourself.

View more solutions

Comments

[Richard Jordan]

Ah it is working... There was an error elsewhere in the scss... still not sure if this is the best solution though... any other ideas out there?

[Richard Jordan]

Yeah - I agree with using what's out there... the challenge I have is that compass seems quite dauntingly complicated... I looked at it and got intimidated so decided to roll my own...

[Rhysyngsun]

Compass has a lot of mixins and utilities, yes it can be overwhelming, but their documentation is nicely organized and more likely than not you're only going to use a small slice of what they provide initially. you can even view source within their docs in case you have any doubts as to how they implemented it.

[Richard Jordan]

That's awesome advice Nathan - thanks - really appreciate it :-) ...you should have put this as a standalone answer so i could vote it up and you can get some more points :-) i will give something like this a try - what i am trying to avoid now (don't remember if it mattered when i first wrote this post) is the need to have non-semantic classes or anything else in my html

[Richard Jordan]

having worked with both - i still prefer the solution that doesn't use extend

[Rhysyngsun]

@davidg I can't disagree with your point, but I felt pointing him in the direction of a framework that is going to solve a lot of other CSS boilerplate problems was more beneficial than giving him a mixin that, as I pointed out, he now has responsibility to maintain.

[tbleckert]

How can extend produce less css? If something, it should produce more code since the .clearfix itself is included as well.

[Rob Erskine]

This is the best answer, since it uses silent classes instead of a mixin or placeholder.

[robertlyall]

I'd recommend against using @extend for clearfix. Ideally, you should break clearfix into it's own utility class and use in your markup when needed to prevent repeated, unnecessary styling repetition. If you're going to extend, or use a placeholder/pseudo class; make sure you are strict, and only use it inside selectors that are nested one level or below.

[Snymax]

you should use a placeholder class %clearfix... if your going to use extends rather then mixin