Grow your CSS skills. Land your dream job.

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

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

    Would probably be better?

    # September 3, 2013 at 12:50 pm

    @basement31

    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

    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.

*May or may not contain any actual "CSS" or "Tricks".