Search code examples
sasscompass-sassspritecodekit

Compass sprite generation not working

I'm not sure what I'm doing wrong--I'm trying to generate a sprite sheet using Compass/Sass. I have a pretty common folder structure:

- www
    + config.rb
    - img
        - common
            - team
                + team-member1.jpg
                + team-member2.jpg (etc)
    - scss
        - global
            - _utilities.scss (etc)

My config.rb file lives in the root www directory. Here are the contents of that file:

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"

output_style = :nested
environment = :development

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

line_comments = false
color_output = false

preferred_syntax = :scss

And here's what I've typed in to generate the sprite sheet:

@import "compass/utilities/sprites";
@import "common/team/*.jpg";
@include all-team-sprites;

I have tried this a variety of ways. I've left out the compass/utilities/sprites import. I've changed the folder directory in the second @import statement. I've tried all of the following variations:

@import "../img/common/team/*.jpg";
@import "img/common/team/*.jpg";
@import "/common/team/*.jpg";
@import "common/team/*.jpg";

And nothing works. Here's the error I'm getting from Codekit: Compass was unable to compile one or more files in the project: 

error styles.scss (Line 47 of _utilities.scss: File to import not found or unreadable: common/team/*.jpg.
Load paths:
  /Applications/AMPPS/www/mysite/www/scss
  /Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets
  /Applications/AMPPS/www/mysite/www/scss
  Compass::SpriteImporter)
overwrite styles.css
Solution

  • Sprites only works with PNG because, unlike JPG, it is a lossless image compression format.
    Indeed, a JPG image already compressed again lose quality as a result of a second compression to create the sprite map.