Skip to content

Instantly share code, notes, and snippets.

@andyharris
Created November 1, 2012 18:46
Show Gist options
  • Save andyharris/3995673 to your computer and use it in GitHub Desktop.
Save andyharris/3995673 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

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
Copy link

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