Sprite Tutorial

• Sprite Tutorial Index

• Customization Options

• Magic Selectors

• Sprite Layouts

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: * note you can use - in file names also ex. glossy-active.png * * my-buttons/glossy.png * my-buttons/glossy_hover.png * my-buttons/glossy_active.png * my-buttons/glossy_target.png

Now in our sass file we add:

@import "my-buttons/*.png";

a {
  @include my-buttons-sprite(glossy)
}

And your stylesheet will compile to:

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

a {
  background-position: 0 0;
}
a:hover, a.glossy_hover, a.glossy-hover {
  background-position: 0 -40px;
}
a:target, a.glossy_target, a.glossy-target {
  background-position: 0 -60px;
}
a:active, a.glossy_active, a.glossy-active {
  background-position: 0 -20;
}

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

.my-buttons-sprite, .my-buttons-glossy {
  background: url('/my-buttons-sedfef809e2.png') no-repeat;
}

.my-buttons-glossy {
  background-position: 0 0;
}
.my-buttons-glossy:hover, .my-buttons-glossy.glossy_hover, .my-buttons-glossy.glossy-hover {
  background-position: 0 -40px;
}
.my-buttons-glossy:target, .my-buttons-glossy.glossy_target, .my-buttons-glossy.glossy-target {
  background-position: 0 -60px;
}
.my-buttons-glossy:active, .my-buttons-glossy.glossy_active, .my-buttons-glossy.glossy-active {
  background-position: 0 -20px;
}

Disabling

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

a {
  $disable-magic-sprite-selectors:true;
  @include my-buttons-sprite(glossy)
}