A lot of you might be thinking “the LESS I hear about CSS preprocessors, the better”. But you could be missing out, while variables and nesting give us some sanity for front-end dev, things can get really fun with mixins.
We’re all about Sass (more specifically SCSS) and buried away deep in our Ultimate Package repository there’s an unsung hero which helps tremendously with sprites.
The pains of spriting
Spriting is commonly viewed as an optimisation technique, its benefits of fewer HTTP requests are often shadowed by the time and effort needed to create it and maintain all its coordinates. But what if creating the sprite was easier and its offsets were predictable?
Before we jump into any code we’re agreed what elements are ripe for spriting (primarily icons and buttons) and which bits are a no-no (textures and backgrounds which rely heavily on alignment). After running a whole bunch of tests on layout patterns and image types we concluded that whitespace in sprites had negligible cost in terms of filesize, so we developed a template for positioning our sprite images on a 500px grid. Each image sits in the top left of its square and they flow vertically downwards. We offset our hover states another 500px to the right. With this ample space between images we don’t have to bloat our markup with extra
<span> elements to tuck our backgrounds into.
Where the magic happens
Firstly we scan down the sprite and define names for each image, these sit as an array in the
$sprite: twitter, facebook, email;
We confirm we’re working with a 500px grid (we’re able to adjust this if we know we’re always dealing with tiny or massive images).
Now we’ve set our variables we define our mixin…
Our mixin takes up to 4 parameters,
sprite-bg('twitter', 5, 10, false)
5- The x offset of the background-image, defaulted to 0
10- The y offset of the background-image, if omitted this defaults to the x offset (for nudging things with even padding)
false- Whether our image has a :hover and :focus state in the sprite. This defaults to true.
The mixin loops through each item in the sprite array until it matches our first parameter, giving us its position in the array. This figure multiplied by our grid size (plus any nudging with the
y parameter) gives us a pixel value for our
background-position-y. We already know that
background-position-x will be 0 (unless we’ve nudged with the
x parameter) because of our grid, our hover/focus is 500px across from that; and we’re done. We use modernizr to check for SVG support and using SASSs clever parent selector
& we just swap out the background image for a resolution independent version. Lovely.
One step further
If you’re likely to have more states for your sprite such as selected or disabled, you could always use another 500px column over from the hover state and add another nested class.