HTML and CSS Reference
In-Depth Information
we want to target. It might not look fancy, but it sure makes the basic use of
sprites a lot easier already. From now on, you can just use
.sprite(1,5)
,
and that's all there is to it. No more annoying calculations or finding random
start coordinates.
Of course, the mixin above only works in our somewhat simplified example
(using a square grid and just one sprite). Some websites out there are more
complex and might require di
"
erent sprites using rectangular grids for
additional optimization. This isn't exactly impossible to fix with LESS, though:
.spriteHelper(@image, @x, @y, @spriteX, @spriteY) {
background: url("img/@{image}.png") no-repeat;
background-position: -(@x*@spriteX) -(@y*@spriteY);
}
.sprite(@image, @x, @y) when (@image = sprite1), (@image =
sprite3){
@spriteX: 32px;
@spriteY: 16px;
.spriteHelper(@image, @x, @y, @spriteX, @spriteY);
}
.sprite(@image, @x, @y) when (@image = sprite2){
@spriteX: 64px;
@spriteY: 32px;
.spriteHelper(@image, @x, @y, @spriteX, @spriteY);
}
Yes, this looks a bit more daunting, but it's still pretty basic if you take a
minute to understand what's going on. Most importantly, the added
complexity is safely hidden away inside the LESS mixins, and we're still able
to use the same sprite mixin as before, only now with three parameters in
total. We've just added an image parameter so that we can easily determine
which sprite to use each time we call our mixin.
Di
"
erent sprites might have di
"
erent grid dimensions, though; so, for each
grid dimension, we need to write a separate LESS mixin. We match each
