Using susy and breakpoint with grunt-sass

Question

Im working on a new project and started to use grunt-sass instead of grunt-contrib-sass because its alot faster. I also removed compass. The thing now is that i cannot find a way to add 'susy' grid and 'breakpoint' anymore. I used to put this in a config.rb file but im not using this anymore because im not using compass.

So i added all susy style in my project and thats works fine but its not my preferred method. But cant find a way to add breakpoint.

Is there a way to add these? Or do i have to use compass for this?

Sorry for my bad english, not very good at it.

Answer 1

No need for Compass, there's a new susy-media breakpoint Mixin designed to work with LibSass which is what you are essentially using via grunt-sass. That's what I use and it works great. So you'd define some Susy grid variables and breakpoints in a _vars.scss partial for example:

// Define susy.
$susy: (
    columns: 12,
    gutters: .8,
);

// Define some breakpoints.
$bp-narrow: 30em;  // 480px
$bp-med: 48em; // 768px

Now put it all together, say in _layout.scss for example:

// the breakpoint (media query)
@include susy-media($bp-med) {
  // now a grid 
  .l-foobar-wrap {
    .foo {
      @include span(7)
    }
    .bar {
      @include span(5 at 8)
    }
  }
}

For more info, read the susy docs, it's all there for you and this works with grunt-sass (LibSass). It's part of my everyday workflow.

Note, as an alternative for really nice media query rendering and retina workflows, I now use Include Media rather than susy-media and it also works fine with LibSass.