Compass sprite - avoid using extends when including a sprite - css

Question

I am using Compass to generate my sprites, and it is working beautifully, but I have run into one small annoyance. I am not able to include an individual sprite using the #include statement when inside of another #include, such as a media query mixin, which I commonly use. My sprite SCSS looks like this:
.sp {
background-repeat: no-repeat;
overflow: hidden;
line-height: 0;
font-size: 0;
text-indent: 100%;
border: 0;
}
$sp-sprite-dimensions: true;
$sp-sprite-base-class: '.sp';
$sprite-layout: smart;
#import "sp/*.png";
#include all-sp-sprites;
In another location, I am attempting to do this:
.logo {
a {
#include break($break1) {
#include sp-sprite(logo-small);
}
}
}
Nested #include statements are fine by SCSS, but it doesn't allow for #extend statements within #include statements, and apparently the sprite #include is generating an #extend statement behind the scenes, which I do not want. Anybody know a way around this?
EDIT:
It's been brought to my attention by #lolmaus that the real problem is that I am nesting an #extend inside of a media query. I guess that's not allowed, any way around it?

Answer 1

Using Compass sprites inside media queries is not possible, at least the way it's described in the documentation.
There are a couple of workarounds:
creating sprites manually via command line;
using a custom mixin.

Answer 2

Here's a SASS (SCSS) mixin for generating a sprite declaration block that will work with media queries
SCSS:
// http://compass-style.org/reference/compass/helpers/sprites/
#mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {
//http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
$sprite-image: sprite-file($map, $sprite);
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
$sprite-map: sprite-url($map);
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-position
$sprite-position: sprite-position($map, $sprite);
// Returns background
background: $sprite-map $sprite-position $repeat;
// http://compass-style.org/reference/compass/helpers/image-dimensions/
// Checks to see if the user wants height returned
#if $height == true {
// Gets the height of the sprite-image
$sprite-height: image-height($sprite-image);
// Returns the height
height: $sprite-height; }
// http://compass-style.org/reference/compass/helpers/image-dimensions/
// Checks to see if the user wants height returned
#if $width == true {
// Gets the width of the sprite-image
$sprite-width: image-width($sprite-image);
// Returns the width
width: $sprite-width; }
}
Usage:
$icons: sprite-map("sprites/icons/*.png"); // define a sprite map
// ... later
#media only screen and (max-width: 500px) {
.video .overlay {
#include get-sprite($icons, play-btn-large);
}
}
Source: GitHubGist - brubrant / get-sprite.scss

Answer 3

The following code describes how to do it
Gist: #extend Compass sprites in #media queries
/*
* 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">
facebook
twitter
youtube
</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