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
Thank you and follow: @eduzera :)
Written by Eduardo Zaghi
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Rails
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#