@extend in @media

extend in media.md

Sass

%half { width: 50%; }
%full { width: 100%; }

#foo {
  @extend %full;

  @media screen (min-width: 600px) {
    @extend %half;
  }
}

#bar {
  @extend %full;
}

#baz {
  @extend %half;
}

CSS

#foo, #bar {
  width: 100%;
}

@media screen and (min-width: 600px) {
  #foo {
    width: 50%;
  }
}

#baz {
  width: 50%;
}

Forked here to apply markdown styling and SCSS highlights: https://gist.github.com/2431779
Gist tied to discussion here: sass/sass#154

The point is really about extending silent selectors, not classes. @extend when used poorly does generate a lot of really ugly code but when paired with silent selectors and used cleanly it can dramatically reduce file size.

Extends in browser won’t work because the original selectors are never written to CSS. The idea is to abstract these objects away from the CSS so they never see the browser. sass/sass#96 (comment)

Now why the hell didn't that frickin work for me? Really need to figure out the Gist stuff on Github

in file name make it .md or .markdown :)

Genius!