Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Why does my visual grid not change?
$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;
}
}
@kaishin

This comment has been minimized.

Copy link

@kaishin kaishin commented Nov 1, 2012

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!

@kaishin

This comment has been minimized.

Copy link

@kaishin kaishin commented Nov 2, 2012

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;
     }
}
@gin93r

This comment has been minimized.

Copy link

@gin93r gin93r commented Feb 25, 2015

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.

@nitely

This comment has been minimized.

Copy link

@nitely nitely commented Mar 2, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment