@extend sucks

What's with @extend?

Using @extend in CSS preprocessors really suck... so use mixins instead. Consider this example.

%antialias {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale;
}

Using @extend

Seems innocent enough:

h3 {
  @extend %antialias;
}

With media queries

Until you try it with media queries, then it won't work. Consider using mixins instead.

@media (max-width: 300px) {
  h3 {
    @extend %antialias;
  }
}