Why does my visual grid not change?

ahtest001.scss

$visual-grid : true;
// ---------------------------------------------------------------------------
// Imports

@import "bourbon/bourbon";
@import "neat/neat";
@import "neat/neat-helpers";


$landscape: new-breakpoint(min-width 480px 4);
$tablet: new-breakpoint(min-width 760px 8);
$desktop: new-breakpoint(min-width 960px 12);

header {
	background: blue;
}

@include media($landscape) {
	header {
		background: red;
	}
}
@include media($tablet) {
	header {
		background: pink;
	}

}
@include media($desktop) {
	header {
		background: orange;
	}

}

The problem here is that the contexts are created after importing Neat, that's why it doesn't recognize them. I think I should be more clear about this in the documentation. Here is what I suggest you to do:

• Create a file called _grid-settings.scss then put your contexts in it:

@import "neat/neat-helpers";

$visual-grid : true;
$landscape: new-breakpoint(min-width 480px 4);
$tablet: new-breakpoint(min-width 760px 8);
$desktop: new-breakpoint(min-width 960px 12);

• Then in the file above, import this file before neat:

@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";

I have noticed a couple of other things that can be improved but this should do it for now!

Not sure if it was intentional or not, but you can call media() from within your element:

header {
    background: blue;
    @include media($landscape) {
        background: red;
     }
    @include media($tablet) {
    background: pink;
     }
    @include media($desktop) {
    background: orange;
     }
}

This doesn't seem to work for me with the breakpoints. If I place some grid settings before importing neat, the grid settings will apply - though when reducing the browser width, the grid will remain at 12 instead of changing to 4. If I keep the breakpoints above the neat import, they will not take affect. I did notice that the css output when doing this creates invalid css. It will include the entire "new-breakpoint(...)" line.

@gin93r double check you have the right sass --version for your neat version.