Last Updated: February 25, 2016
·
1.624K
· eduzera

Sprites with SASS/COMPASS in Rails projects

I want to show how create sprites images in easy way for rails applications using sass and compass. I going to use a arrow lef and right example.

Create a folder to put images to use in sprite in:

Rails.root/app/assets/images/arrows-sprites

Put arrows files there:

arrows-sprites/arrow-left.png

arrows-sprites/arrow-right.png

Setup your .CSS.SCSS

1.Necessary imports

@import "compass"

@import "compass/utilities/sprites/base"

2.Add variable $sprites-arrows to tell to compass where is your files to sprite

$sprites-arrows: sprite-map("arrows-sprites/*.png",$new-position: 100%, $spacing: 100px, $new-repeat: no-repeat);

3.Add background style to .arrow element

a.arrow{
  background: $sprites-arrows no-repeat;
  width: 20px;
  height: 20px;
}  

4.Set .arrow-left for use arrow-left file

a.arrow.left{
  @include sprite-background-position($sprites-arrows, arrow-left, 17px, 0px);
}

5.Set .arrow-right for use arrow-left file

a.arrow.right{
  @include sprite-background-position($sprites-arrows, arrow-right, 17px, 0px);
}

6.That's it , now you can use sprites in easy way :)

7.Pay attention in compass documentation for improve your knowledge

http://compass-style.org/help/tutorials/spriting/

Thank you and follow: @eduzera :)