Easy Sprites v0.5

####Dependencies please note this helper will not work with lower versions of sass and compass framework

Name	Version
SASS	`3.3.5`
COMPASS	`1.0.0.alpha19`

###Spriting helper usage 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.

.test{
  @include sprites($name:'icon-name')
  &:hover{
    @include sprites-states($name:'icon-name', $hover: true) //add this if you need :hover option
  }
  &:active{
    @include sprites-states($name:'icon-name', $active: true) //add this if you need :active option
  }
  &.opened{
    @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

PLEASE NOTE: THIS RELEASE HAS MAJOR CODE CHANGES AND IT'S NOT COMPATIBLE WITH OLDER VERSIONS. For older versions visit [releases page][1]. [1]: https://github.com/paulgabronis/Easy-Sprites/releases

pauliusmaciulis / Easy-Sprites

Easy Sprites v0.5

About