@extend Compass sprites in @media queries

gistfile1.sass

/*
 * A simple way to extend Compass sprite classes within media queries.
 * Based on the knowledge gained here: http://www.sitepoint.com/cross-media-query-extend-sass/
 * I admit it's nowhere near as clever, but it does work :)
 */


/*
 * Set-up sprites for each media size
 */
 
// default
@import "icons-sm/*.png"
@include all-icons-sm-sprites

// corresponding sprites for larger devices
// notice that @import is within the @media query
// that's critical!

@media (min-width: $large)
  @import "icons-lg/*.png"
  @include all-icons-lg-sprites
	
/*
 * Now you can do something like this
 */

// an example mixin

@mixin social-links($size)
  $socials: facebook, twitter, youtube
  @each $social in $socials
    &.#{$social}
      @extend .icons-#{$size}-#{$social}
      
/*
 * Put to use
 */

// assuming you've got mark-up like this

<p class="social">
  <a href="#" class="facebook">facebook</a>
  <a href="#" class="twitter">twitter</a>
  <a href="#" class="youtube">youtube</a>
</p>

// you can do this							
.social
  a
    @include social-links(sm)
    width: 25px
    height: 25px
    @media (min-width: $large)
      @include social-links(lg)
      width: 50px
      height: 50px