Getting sprightly with Sass

Posted by Chris on

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?

Meet sprite-bg

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 variable.

$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).

$spritegrid:500;

Now we’ve set our variables we define our mixin…

Our mixin takes up to 4 parameters, sprite-bg('twitter', 5, 10, false)

  • twitter - The item defined in the @$sprite@ list
  • 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 ourbackground-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.

More Articles

Donkeytail plugin for Craft CMS

Posted by Garrett

Today we released the lite version of Donkeytail, a Craft CMS plugin we’ve been using internally for a few months now. Donkeytail stems from a need we had to content manage dots on images. Maps come up a lot in our world. From maps for new development projects to maps for hiking trails through the Scottish Highlands, and most of the time it makes more sense to roll our own system for design… Read More »

Inaugural #CraftCMS meetup in Dallas

Posted by Garrett

Yesterday we hosted the inaugural #CraftCMS Dallas meetup by our friends at Busy Noggin — complete with lots of pizza, Twig and general website chatter. A good time was had and we’re looking forward to being a part of the growing Craft CMS community here in Dallas. If you missed it but are into Craft, don’t fret - there’ll be plenty more to come. If you’ve not used Craft but are… Read More »

Bob’s your uncle!

Posted by Garrett

A hearty welcome to the latest additions to our growing family, Steve Sharpe and Gavin Platt. Steve’s in Nottingham with Chris, and Gavin’s from wherever he’s calling home this week (though his mailing address is in Leeds). Steve’s our new in-house engineer — building anything from complex enterprise applications to native apps for iOS and Android. Gavin joins us after 10 years as a self… Read More »

Why our clients love Craft

More and more people are discovering Craft. With big names like the Associated Press, Netflix, and Agatha Christie moving to Craft, the future looks bright. There’s a lot out there on what makes Craft great from a technical standpoint, but Craft is great for non-technical users, too. Here are the biggest reasons our… Read More »

View All Articles

Envelope Icon

Join Our Newsletter

We don’t send them often, but you’ll want in on this action when we do.

Are you a design agency looking for a web development partner?

We can help