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.

></tr></table></code></figure> The first change is on line 7, change `` 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

Damien White  

Hi, my name is Damien White. I'm a software architect with over 20 years of experience. I simply love coding! I have a driving passion for software development, and a thirst for knowledge that cannot be quenched. I enjoy writing Web and Mobile applications, and I'm happy to share what I know in my quest to learn as much as possible.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14</td>
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" }); } }); </pre></div>