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

Seems innocent enough:

h3 {
  @extend %antialias;
}

Until you try it with media queries:

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

…then it won’t work. Use mixins instead.