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
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
<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.