The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Issue with @extend and clearfix

  • # August 24, 2013 at 11:35 pm

    Hi everyone,

    I’m working to gain a better understanding of SCSS and I’ve run across an interesting quirk I’m having trouble with. I created the ‘clearfix’ as a placeholder like so:

    %clearfix:after {
      content: '';
      display: table;
      clear: both;

    …then tried to @extend it into some random class like this:

    .platypus {
      @extend clearfix;

    This didn’t work, and I’m kind of confused as to why not. Thoughts? Thanks!

    # August 24, 2013 at 11:51 pm

    should be

    @extend %clearfix
    # August 25, 2013 at 9:04 am

    Ha. Awesome. Derp.

    Not sure how I missed that one, thanks man!

    # August 25, 2013 at 11:11 am


    # August 27, 2013 at 5:26 am

    This reply has been reported for inappropriate content.

    %clearfix {
    &:after {
    content: ”;
    display: table;
    clear: both;

    Would probably be better?

    # September 3, 2013 at 12:50 pm


    From what I can tell it doesn’t matter if you do it your way or the way I originally posted it – the output seems to be the exact same. Your version does feel more semantic though, so I would suggest that version.

    # September 4, 2013 at 1:20 am

    This reply has been reported for inappropriate content.

    If you wanted to add zoom: 1 for example (to trigger has layout in ie6/7) it makes extending to a single, silent class easier as you cant @extend to a chain of selectors but you can @extend to a nested selector – if that make sense.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed