Issue with @extend and clearfix

[Corey Megown]

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!

[__]

should be

@extend %clearfix

[Corey Megown]

Ha. Awesome. Derp.

Not sure how I missed that one, thanks man!

[__]

:)

[Corey Megown]

@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.

[Author]

Posts