Quick guide to auto generate image sprite using Compass

One of the nice thing about Compass is its smart way to auto generate sprite image. Lets take a quick look on using Compass to generate our project's sprite image need.

We will use this file structure to our project:

Project's file structure

Where:
assets/images = source image files of Compass generated sprite image
assets/js = source javascript files goes here
assets/sass = SASS files stored here
img = Compass generated sprite image will be saved here
js = minified version of source javascript

Now, lets have the following codes in our "config.rb" file:

  
http_path = "/"
css_dir = "css"
sass_dir = "assets/sass"
images_dir = "assets/images"
javascripts_dir = "js"
generated_images_dir = "img"
http_images_path = http_path + "/" + generated_images_dir
http_generated_images_path = http_images_path
  

It is important to respecify the value of "http_generated_images_path" to:

  
http_path + "/" + generated_images_dir
  

... although the Compass document says that value is the default. If not done, Compass will generate CSS with the background image url set to wrong path.

Create new folder inside "assets/images" and labeled it as "icons":

"icons" folder

This "icons" folder will contain the background images that Compass will look as source for generating a sprite image. Lets put background image files in this "icons" folder:

Sample background image files

Next, create "style.scss" inside "assets/sass" folder and populate it with this codes:

  
@import "compass/utilities/sprites";
$icons-layout: vertical;
$icons-spacing: 20px;
$icons-sprite-dimensions: true;
@import "icons/*.png";
@include all-icons-sprites;
  

To find out more about the Compass sprite options, please check http://compass-style.org/help/tutorials/spriting. Note: as of this writing the smart layout does not support sprite spacing.

Compile your SASS and Compass should generate a sprite image file inside "img" folder something like this:

Generated sprite image

... and a regular CSS "style.css" inside "css" folder should also be generated populated with codes something like this:

  
.icons-sprite, .icons-check, .icons-grid, .icons-like, .icons-marker, .icons-next, .icons-prev {
  background-image: url('/icons-s0e3d8eaec3.png');
  background-repeat: no-repeat;
}
.icons-check {
  background-position: 0 0;
  height: 18px;
  width: 22px;
}
.icons-grid {
  background-position: 0 -38px;
  height: 16px;
  width: 16px;
}
.icons-like {
  background-position: 0 -74px;
  height: 14px;
  width: 15px;
}
.icons-marker {
  background-position: 0 -108px;
  height: 19px;
  width: 13px;
}
.icons-next {
  background-position: 0 -147px;
  height: 18px;
  width: 18px;
}
.icons-prev {
  background-position: 0 -185px;
  height: 18px;
  width: 18px;
}
  

Now, we can use the generated CSS class in our application like:

  
a.button-next i {
  @include icons-sprite(next);
  overflow: hidden;
}
a.button-prev i {
  @include icons-sprite(prev);
  overflow: hidden;
}
  

Comments

The image with sprites appeares in my images folder, but in SASS file I have an error with @import "icons/*.png"; as cannot resolve import to SASS. And in @include all-icons-sprites; there is an error as cannot find mixin "all-icons-sprites"

My folders structure

images
icons
icon_1.png
icon_2.png
icon_3.png
icon_4.png

config.rb file contains:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
http_fonts_path = "../fonts"
asset_cache_buster :none
relative_assets = true

SASS file
@import "compass/utilities/sprites";
@import "icons/*.png";
@include all-icons-sprites;

CSS output
.icons-sprite, .icons-icon_1, .icons-icon_2, .icons-icon_3, .icons-icon_4, .icons-icons-sc0b61509a6 {
background-image: url('../images/icons-s705cc83f98.png');
background-repeat: no-repeat;
}
If I change this line in SASS - mistake with import disappears

@import "../images/icons/*.png";
BUT in CSS now I see a wrong path

background-image: url('../images/../images/icons-s3809f1281e.png');
If somebody knows how to solve the problem, I'll be very very grateful!!!

I will share my config.rb in one of my actual projects:

   
http_path = "/sites/all/themes/custom/mybootstrap"
sass_dir = "assets/sass"
images_dir = "assets/images"
css_dir = ".." + http_path + "/css"
javascripts_dir = ".." + http_path + "/js"
fonts_dir = ".." + http_path + "/fonts"
generated_images_dir = ".." + http_path + "/img"
http_javascripts_path = http_path + "/js"
http_fonts_dir  = http_path + "/fonts"
http_fonts_path = http_fonts_dir
http_images_path = http_path + "/img"
http_generated_images_path = http_images_path
  

The folder structure:

   
project
-config.rb
-assets
--images
--sass
sites
-all
--themes
---custom
----mybootstrap
-----img
-----js
-----css
-----fonts
  

The css output should be:

   
background-image: url('/sites/all/themes/custom/mybootstrap/img/icons-s3809f1281e.png');
  

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.