CSS Sprites Revisited - CSS Essentials - page 215

In the example above, we have a list of sharing options. For whatever
reason (theming or just personal preference), let's say we decide to use CSS
backgrounds instead of HTML images. Nothing to it with the mixins we just
created. Here's the code (assuming we're using the reference image shown
earlier):
<ul class="sharing">
<li class="twitter"><a href="#">Share [article's title] on
Twitter</a></li>
…
</ul>
.sharing .twitter a {
.spriteReplace(0, 0, 32px, 32px); display:block;
}
2. INLINE IMAGES
For the second use case, we'll tackle inline images. The main problem we're
facing here is that we won't be able to put fixed dimensions on the html
element itself because we're dealing with variable-sized content. Typical
uses of inline images are for icons next to text links (for example, external
links, download links, etc.), but this method can also be used for any other
item that allows text to be wrapped around a sprite image.
.spriteInline(@x, @y) {
.sprite(@x, @y);
display: inline-block;
content: "";
}
.spriteInline(@x, @y, @width, @height) {
.sprite(@x, @y);
display: inline-block;
content: "";
width: @width;
height: @height;}