gpr
gpr

Reputation: 959

How do I use a compass-generated sprite for generated content?

Is it possible to use a compass-generated sprite to replace the icon path below?

a:before { content: url(/pathto/icon.png); }

Although I can work out how to get the sprite path in there, I don't know if it's possible to get the correct bit of the sprite showing.

Upvotes: 0

Views: 271

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

Don't load the sprite map as "content". Set content to " ", load the sprite as a background, and control it the way you would with any other text/image-replacement sprite.

a:before {
  @include <map>-sprite(<icon>);
  @include sprite-dimensions(<map>, <icon>);
  content: " ";
}

Where <map> and <icon> are replaced by your specific sprite-map and icon names.

Upvotes: 3

Related Questions