HTML and CSS Reference
In-Depth Information
sprite to its specific dimension (the example above handles three di
"
erent
sprites and matches it to two di
"
erent grid dimensions), and we define the
dimensions (
@spriteX
and
@spriteY
) locally in each mixin. Once that is
done, we o
#
oad the rest of the work to a little
.spriteHelper
mixin that
does all of the necessary calculations and gives us the same result as
before.
The “guards” (as LESS calls them—characterized by the keyword “when”)
are quite new to the LESS vocabulary, so do make sure you're using the
latest version of the LESS engine if you attempt to run this yourself. It does
o
"
er a great way to keep the sprite mixin as clear and concise as possible,
though. Just pass the sprite you want to use to the sprite mixin, and LESS
will figure out the rest for you.
Common CSS Sprite Use Cases
With these mixins at our disposal, let's see what di
"
erent CSS sprite use
cases we can identify and find out whether capturing these use cases in
additional LESS mixins is possible. Once again, in order to minimize
complexity in the upcoming sections, we'll assume you're working with a
square grid sprite. If you need a rectangular grid, just add the image's
parameter to the LESS mixins we'll be working with, and everything should
be fine.
For each use case, we'll define two mixins: one with and one without height
and width parameters. If you're like me and you keep misspelling the height
and width keywords, the second mixin might come in handy. It does leave
you the responsibility of learning the correct order of the parameters,
though. LESS allows you to define these mixins in the same document,
however, so there's really no harm in listing them both, picking whichever is
easiest for you.
