Setting Up Sass and Compass with Ember-CLI
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:
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
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
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.