Sass bourbon neat breakpoints not working

Question

So I am new to Sass and Bourbon with Neat and for some reason the breakpoints I am using dont seem to be responding. I have the Sass importing like so

//Bourbon
@import "bourbon/app/assets/stylesheets/bourbon";

//Neat
@import "neat/app/assets/stylesheets/neat";

// Scut, a Sass utilities library: https://davidtheclark.github.io/scut/
@import "scut/dist/scut";

// Configuration variables
@import "config";

// Configuration layouts
@import "layout";

In Configs I have

$break-tablet: new-breakpoint(min-width 480px, 6);
$break-desktop: new-breakpoint(min-width 761px, 10);

Then in layout I would use something like this with no luck

#responsive-menu-toggle {
    @include media($break-desktop) {
        display: none;
    }
}

Am I missing something??

Complies as

@media screen and (min-width: min-width 761px 100px) {
  #responsive-menu-toggle {
    display: none; } }

Of course I do but thats how the Sass is being complied using Bourbon and Neat (obviously not the right way). I think it might actually be the Scut framework overriding it so it doesn't compile right. — Packy, Jul 21 '15 at 00:59
If you've got a library that overwrote a mixin by the same name as the one you're trying to use in another library, that means you have to either stop importing the mixins you don't actually want to use or follow the rules for the other mixins. — cimmanon, Jul 21 '15 at 01:10
Basically it was a table of mixins over writting the Bourbon ones. Simple user error — Packy, Jul 23 '15 at 20:26

score 0 · Answer 1 · answered Sep 20 '15 at 16:49

Looks like there's a syntax error, your breakpoints should be defined as such:

$break-tablet: new-breakpoint(min-width 480px 6);
$break-desktop: new-breakpoint(min-width 761px 10);

If you look at the documentation this is effectively not clear enough from the syntax, but only from the examples: http://thoughtbot.github.io/neat-docs/latest/#new-breakpoint

Sass bourbon neat breakpoints not working

1 Answers1