Sharing the Code

Programming stuff that might be useful to others

Getting Compass to work in Ember CLI

I use Compass to compile my Sass into CSS in Ember. Compass is a library that sits on top of Sass and provides some extra features. It’s not the easiest to setup with Ember CLI.

First you need to have the Compass Gem installed:

gem install compass

Next you need to install the Ember CLI Compass Node module:

npm install --save-dev ember-cli-compass-compiler

You don’t need to install the Ember CLI Sass module.

You generally put your images and fonts in public/assets like below:

public
  assets
    fonts
    images
     generated
       sprites
         1x-s31e20c1c88.png
         2x-sa9a0c6ffbe.png
     sprites
       1x
         image_a.png
       2x
         image_a.png
     image_b.png
     image_b@2x.png

Compass is able to generate CSS sprites. Basically it generates one image file from a lot of small images in a folder. You then use this large image as a CSS background image and position it correctly to show the individual image. Compass makes this quite easy. This saves the browser from having to download a lot of small image files. So in the file structure above all the images in the sprites/1x folder are saved as one big image generated/sprites/1x-s31e20c1c88.png.

When Ember CLI builds the app it copies all the files in public/assets to dist/assets. The HTML file is in dist, so while you want to tell Compass that the images are in public/assets/images, you want the CSS to refer to /assets/images. Ember CLI uses the Compass Gem which unfortunately has limited command line options. So to get around this you specify some options in Brocfile.js and the rest in your root Sass file (app.scss):

Brocfile.js:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var production = EmberApp.env() === 'production';

var app = new EmberApp({
  compassOptions: {
    outputStyle: production ? 'compressed' : 'expanded'
  }
});

You can get access to the environment in Brocfile.js so you can have different output styles in development and production. To build the development version you would type:

ember build

and for the production version:

ember build --environment production

app/styles/app.scss:

@import "compass/configuration";
@include compass-configuration((
  images-path: "public/assets/images",
  http-images-dir: "/assets/images",
  generated-images-path:"public/assets/images/generated",
  http-generated-images-dir: "/assets/images/generated",
  fonts-path: "public/assets/fonts",
  http-fonts-dir: "/assets/fonts",
  relative-assets: false
));

Comments are closed