Search code examples
javascriptcssember.jscompass-sassbroccolijs

How to generate image sprites in ember-cli using compass?

Update - 20140614:

After not getting any answers to this question, or on github, I decided to come up with my own solution to the problem. I was using compass for a number of things, but its main utility was in its ability to generated image sprites. Most other things could be accomplished using pure SCSS.

Thus, I wrote broccoli-sprite. This, used in conjunction with ember-cli's built in support for SCSS using broccoli-sass, was able to meet my needs.

NPM

You can read more about the process here.

Now I am thus no longer interested in integrating compass into my ember-cli app. As my solution does not directly answer the question (as it does not use compass), I consider this question to be unanswered. Since this question might yet benefit others in the community who wish to do so, I am leaving this open, and will still honour the bounty!

Update - 20140620:

Bounty has expired.

Original question:

In an ember-cli app, using broccoli-compass, how can it be configured such that the generated CSS references image file paths correctly, including generated image file paths?

Using compass, the following SCSS:

@import"icon/*.png";
@include all-icon-sprites;

… will generate a single .png file with all of the images in the icon folder, and CSS for displaying each.

I would like to be able to do the same via compass within ember-cli, which uses broccoli to build its asset pipeline.

  • Must work within ember-cli - that is, it must be built when ember serve or ember build is run
  • Must use compass to generate image sprites from a folder of images
  • The images generated should be copied to the assets folder
  • The generated CSS should point to images located in the assets folder, not to a temporary tree folder

What I have attempted so far:

#1

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    imagesDir: 'public/images',
    // imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

When I do this, the compass command fails because it cannot locate the image files within the tree.

#2

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    // imagesDir: 'public/images',
    imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

Just to try things out, I copy the image files into the styles directory. This time the compass command succeeds, but, the generated CSS references image files that do not exist. The generated images do not appear to get copied into the assets folder as expected ( or anywhere else for that matter):

$tree tmp/output
tmp/output/
├── assets
│   ├── app.css
│   ├── app.js
│   ├── qunit.css
│   ├── qunit.js
│   └── vendor.css
├── images
├── index.html
├── testem.js
└── tests
    └── index.html

3 directories, 8 files

Details:

SCSS that I would like to be able to compile (for sprite generation):

@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";
Solution

  • The hard way

    Add to your brocfile

    var app = new EmberApp({
    compassOptions: {
        imagesDir: 'public/assets'
    }
});

    and then import the icons

    @import "compass/utilities/sprites";
@import "icons/*.png";

$icons-sprite-dimensions: true;
@include all-icons-sprites;

    and overwrite the path 

    .icons-sprite {
    background-image: url('/assets/icons-sea02d16a6c.png');
}

    The more elegant way

    Configure compass to use particular directory

    @import "compass/utilities/sprites";
@import "compass/configuration";

$compass-options: (http_path: "/", generated-images-path: "public/assets", http-generated-images-path: "/assets", images-path: "public/assets");

@include compass-configuration($compass-options);

@import "icons/*.png";
$icons-sprite-dimensions: true;
@include all-icons-sprites;

    It is not a perfect solution although it works. Configuration should not be stored in .scss files. Unfortunately those options inside brocfile are not going to fly.