Setting Up Sass and Compass with Ember-CLI

September 4, 2014 • Damien White

If you followed along with my previous post on Ember CLI, you were able to setup Emblem and CoffeeScript with Ember CLI. Now let’s move on to some styling with Sass. Well, SCSS and Compass.

Setting Up Sass

Sass is super easy to setup thanks again to Broccoli:

npm install --save-dev broccoli-sass

Now you can change the styles/app.css file to app.scss. Restart your server and you’re now using SCSS.

Setting Up Compass

Compass is a bit trickier to set up, and it varies by version of Ember-CLI. I’m using Ember-CLI v0.0.39. Here’s what I did, but your mileage may vary.

The first thing I did was get Compass installed. Since we’re using a RubyGem, let’s introduce Bundler into our project so that other team members can get the site up and running. We’ll add a Gemfile to the root with the following contents

source "https://rubygems.org"

gem 'compass'

Now, assuming you have Bundler installed, you can just run bundle from the root directory, and Compass will be installed.

Next, we have to install broccoli-compass

npm install --save-dev broccoli-compass

Unfortunately, unlike Sass, Emblem, and CoffeeScript, we need to do some further configuration in order to get it to work.

I started by changing the name of app.scss to <my_app>.scss. This is because the default layout looks for a file named <my_app>.css once the preprocessing is done. If we do the next step with app.scss, we’ll get app.css instead, which isn’t a huge deal, but would mean we’d need to change the Ember CLI layout.

Now hop over to your Brocfile.js and we’ll add the following code. This version partly comes from Sam Selikoff on his StackOverflow question/answer. I’ve modified it a bit, which I’ll talk about in a second.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var compileCompass = require('broccoli-compass');
app.registry.add('css', 'broccoli-compass', 'scss', {
  toTree: function(tree, inputPath, outputPath, options) {
    // broccoli-compass doesn't like leading slashes
    if (inputPath[0] === '/') { inputPath = inputPath.slice(1); }

    return compileCompass(tree, inputPath + '/<my_app>.scss', {
      sassDir: inputPath,
      imagesDir: 'images',
      cssDir: outputPath,
      config: process.cwd() + "/app/config.rb"
    });
  }
});

The first change is on line 7, change <my_app> to whatever you named your .scss file to in the previous step. Second, I like using a config.rb file in order to do imports and such (e.g. Zurb Foundation, Font-Awesome), so I manually added a config.rb for Compass (line 11). That file looks like this:

# Set this to the root of your project when deployed:
http_path = "/"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded #or :nested or :compact or :compressed

# Disable debugging comments that display the original location of your selectors.
line_comments = false

Restart your server for the changes to take effect. With those steps complete, you should now be able to @import "compass" in your .scss file.

Fantastic Features

Now that Compass is installed, you have the ability to use some fantastic mixins in your SCSS files. One of my favorites is the Compass sticky footer. I’ve been using that technique since I read Matthew James Taylor’s post on the topic. Now with Compass it’s just a simple mixin away. Do you have a favorite mixin? There are just so many in the Compass library!

Posted in ember, javascript and tagged with compass, ember-cli, javascript, sass

Damien White

I am a software architect with over 16 years of experience. I simply love coding! I have a driving passion for computers and software development, and a thirst for knowledge that just cannot be quenched. I'm happy to share what I know in my quest to learn as much as possible. I focus most of my time on web development using Ruby on Rails, Ember.js, and ASP.NET MVC.

comments powered by Disqus