Set fixed gutter in Bourbon Neat

bourbon, neat, sass

Solution

One solution would be to create your own mixin that overrides the Neat gutter.

@mixin col-with-gutter( $cols, $gutter ){
    @include span-columns($cols);
    margin-right: $gutter;
}

.half{
    @include col-with-gutter(2, 30px);
}

Obviously you would have to do some additional customization if you need to use some of the other `span-columns` features. I suggest you look at the _span-columns.scss source to figure out what might work best for you.

Honestly though, I think there is a reason that this functionality isn't built in. In most situations, setting the gutter to `30px` would be detrimental to a responsive design (since the total width of the columns will likely not add up to 100%).

You may have a legitimate reason for wanting exactly `30px`, but if you are not certain you need an exact value it may be worthwhile to reconsider.

Problem

By default, Neat uses percentages as the margin-right of each `span-columns` element, but I'm hoping for a fixed `30px` gutter, regardless of the `outer-container` width.

Original source