How do I show the columns of the grid of Bourbon Neat?

Question

In my CSS file apply the commands of Bourbon Neat and not show columns in html file, if show the result of apply but not show columns.

.container{
    @include outer-container;
    @include span-columns(2 of 8, table);
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    width: 960px;
}

When show the css generated for sass not show background property of Bourbon Neat columns.

Answer 1

The important thing is to both set $visual-grid: true; and define your breakpoints before your line @import "neat";

From https://github.com/thoughtbot/neat#using-neat:

The visual grid reflects the changes applied to the grid via the new-breakpoint() mixin, as long as the media contexts are defined before importing Neat.

Whether or not you choose to use a _grid-settings.scss file (as the docs recommend) is up to you. But in order to see the visual grid at all you definitely need to set $visual-grid: true; before importing neat. And in order for the visual grid to behave responsively, you also need to define your breakpoints before importing neat.

Answer 2

Unfortunately, just adding "$visual-grid: true;" in the container won't work. Or at least it doesn't work for me. However, adding a "_getting-settings.scss" file with the following settings in the file worked for me:

$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.5;

The documentation isn't very clear where $visual-gridL should go, so it's hard to tell if that is as the developers intended. I think they need to provide better examples in this case.