broccoli-sass, node-sass, breakpoint-sass

Question

I'm trying to use breakpoint-sass with broccoli-sass in my Ember CLI project, but when using @include breakpoint(100px) it crashes with the following error:

cannot add or subtract numbers with incompatible units
 [string exception]

It's simple to reproduce:

# install latest version of ember-cli:
$ npm install -g ember-cli

# create a new app:
$ ember new breakpoint-sass-test
$ cd breakpoint-sass-test

# add broccoli-sass
$ npm install --save-dev broccoli-sass

# install breakpoint:
$ bower install breakpoint

# add the following line to `Brocfile.js`:
app.import('bower_components/breakpoint/breakpoint/_breakpoint.scss');

# add the following lines to `app/styles/app.scss`: 
@import "bower_components/breakpoint/breakpoint/_breakpoint.scss";

.test {
  @include breakpoint(100px) {
    display:none;
  }
}

Answer 1

broccoli-sass uses libsass (via node-sass), instead of the Ruby Sass implementation, and breakpoint-sass doesn't work with libsass at this point, as far as I know. You could try something like Bourbon/Neat to get similar functionality to breakpoint. Neat has the media mixin, which is very similar to Breakpoint Sass.

http://thoughtbot.github.io/neat-docs/latest/#media