Search code examples
sassbourbonneat

@include outer-container not taking default defined in grid-settings

So I've got my _grid-settings.css.scss defined as per the docs and in it, among some of the other default overrides is $max-width: 1200px;.

Part of the contents of my override:

$visual-grid: true;
$visual-grid-color: green;
$visual-grid-index: front;
$visual-grid-opacity: 0.2;

$column: 90px;
$gutter: 30px;
$grid-columns: 8;
$max-width: 1200px;

I know this is working because I'm using the visual grid as well and when I change $max-width to 100% I see that change occur.

The problem I'm having is that my @include outer-container on my body is not being respectful of this value, contrary to the docs, it seems not to notice it.

body {
  @include outer-container;
}

When I change this to @include outer-container(1200px); the content then falls into place alongside the rest of the grid.

Solution

  • The problem was that I was also using Bitters and did not know that it has its own grid settings as well. I had to make sure that I uncomment @import "grid-settings"; from base/_base.css.scss as per the docs' instructions.