compass/doc-src/content/help/tutorials/spriting/magic-selectors.markdown

title	layout	crumb	classnames
Sprite Magic Selectors	tutorial	Magic Selectors	tutorial

#Sprite Tutorial <%= sprite_tutorial_links %>

Magic Selectors

If you want to add selectors for your sprites, it's easy todo by adding _active _target or _hover to the file name, In the example below we have a sprite directory that looks like:

• selectors/ten-by-ten.png
• selectors/ten-by-ten_hover.png
• selectors/ten-by-ten_active.png
• selectors/ten-by-ten_target.png

Now in our sass file we add:

@import "selectors/*.png";

a {
  @include selectors-sprite(ten-by-ten)
}

And your stylesheet will compile to:

.selectors-sprite, a {
  background: url('/selectors-sedfef809e2.png') no-repeat;
}

a {
  background-position: 0 0;
}
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
  background-position: 0 -20px;
}
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
  background-position: 0 -30px;
}
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
  background-position: 0 -10px;
}

Alternatively you can use the @include all-selectors-sprites; after the import and get the following output:

.selectors-sprite, .selectors-ten-by-ten {
  background: url('/selectors-sedfef809e2.png') no-repeat;
}

.selectors-ten-by-ten {
  background-position: 0 0;
}
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
  background-position: 0 -20px;
}
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
  background-position: 0 -30px;
}
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
  background-position: 0 -10px;
}

Disabling

To disable this feature set $disable-magic-sprite-selectors to false before calling the sprite mixin

a {
  $disable-magic-sprite-selectors:false;
  @include selectors-sprite(ten-by-ten)
}