chriseppstein/compass — Issue #617: Sprites inside @media queries
Author: DBanck
Created: 2011-11-15 15:07:37+00:00
State: open

I'm using sprites inside a `@media screen and (max-width: 480px)` query.

But the generated CSS will apply to all elements and not only those inside the media-query. So it will override my other sprite.

Example:
main.sass:

```sass
body

#main-navigation
background: inherit

.home-button
+icons-sprite(navigation-home)
```
_mobile.sass:

```sass
@import sprites/mobile

@media screen and (max-width: 480px)
body
overflow: auto

#main-navigation
background: none

.home-button
+mobile-sprite(navigation-home)
```

The generated CSS looks like this:

```css
.icons-sprite, body #main-navigation .home-button {
background: url('/images/icons-sf5e32584e9.png') no-repeat;
}

.mobile-sprite, body #main-navigation .home-button {
background: url('/images/mobile-s32b9a3f1df.png') no-repeat;
}

@media screen and (max-width: 480px) {
body #main-navigation .home-button {
background-position: 0 -116px;
}
}
```

So the second sprite will override the first one, even if it's just indented for mobile usage.