Easy Sprites


A spriting helper plugin for the SASS framework.


Copy _spriting.scss to your project directory and @import it to your main .scss file. Create two folders in scss images folder. For example I've created icons folder for standard images and icons@2x for x2 bigger images for retina screens. Make sure that default images divisible by 2 and retina images are divisible by 4. If they are not, this can lead to background position shifting and wrong background positioning for retina screens.

In your main .scss file add @include directive with chosen options to generate sprite images. $name options is necessary.

Global options

Default folder name is icons but you can change it (if using retina images don't forget to create icons@2x folder). Also those options should be placed above @import "spriting" just like that:

$icons-map: 'icons' //optional! if you keep folder name "icons"
$retina-sprite: false //by default retina spriting if set to false
$comma-separated: true //by default is set to true if you don't want comma-separated classes set it to false
@import "spriting";

Generate sprites

if you want to use $hover or $active options you need to add image with -hover or -active name extensions to your icons folder.

  @include sprites($name:'icon-name')
    @include sprites-states($name:'icon-name', $hover: true) //add this if you need :hover option
    @include sprites-states($name:'icon-name', $active: true) //add this if you need :active option
    @include sprites-states($name:'opened-icon') //add only image name if you need any additional image/states for your icons i.e. active, opened etc...

List of local options

By default element size is set to true it applies width and height from actual source image, if you don't need them for any reason you can set it to false.
$size: true //bool
By default centering is set to false if you need to center your image to x, y or both axis use one of these options.
$center: false //bool
$center-y: false //bool
$center-x: false //bool
By default comma separated option is set to global state,if global is true it means local is true. If you need to use sprite into @media set $comma-separated to false localy when construct your sprites.
$comma-separated: $comma-separated //bool

Compass config.rb

If using this helper to generate sprite images, configuration options should be applied to your config.rb file (adjust path's to match your project).
dir = File.dirname(__FILE__)
css_dir = "/Content/Styles"
sass_dir = "scss"
images_dir = "/Content/Styles/images"
sprite_load_path = "scss/images"
relative_assets = true

What is Sourcery?

All of these components are Open Source.