Sprites inside @media queries

[dbanck]

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:

body

  #main-navigation
    background: inherit

    .home-button
      +icons-sprite(navigation-home)

_mobile.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:

.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.

[scottdavis]

ho hum this is a bad bug @chriseppstein

[chriseppstein]

It's not a bug. The mixins set up the per-sprite properties and then extend the base class. In order for this to work, you have to define the base class in the proper media context. This means that you can't use the magic import, but you can run

compass sprite --skip-overrides "path/to/sprites/*.png"

and then edit that file to meet your needs and import it instead.

Maybe we should add some docs for this?

[dbanck]

If it's not a bug, some docs with examples would be really great. (:

[dunglas]

Do you have an exemple of Compass sprites inside of media queries?

[dfadler]

If anyone still needs a solution for using sprites within media queries I've created a mixin that will help you.
https://gist.github.com/3105369

[brubrant]

@dfadler Man, you just saved my day!!

[u-foka]

Another solution I've created to serve quality sprites for high dpi screens: https://gist.github.com/d009f35ca1bda8d71f52.git