How do determine gutter-width in the sass version of zurbs foundation

问题

Should be relatively simple, by I can't quiet figure it out.

I have this:

.parent
   @include grid-row()


.main
    @include grid-column(8)

.sidebar
    @include grid-column(4)

The elements 'main' and 'sidebar' end up sitting right next to each other with no gutter.

I can see in the grid docs that there is a variable called $column-gutter, and that it has a default setting. But I can't see it's effect.

In the file _grid.scss I can see $column-gutter. It has a default value, and I have touched it. But it has no effect on side-by-side elements in a row. These elements have no gutters.

So how do I make use of that variable, or otherwise set gutter widths?

回答1:

You should set values of the configuration variables prior to importing Foundation.

See http://compass-style.org/help/tutorials/configurable-variables/ :

Many Compass modules use guarded assignment to allow you to set defaults for that module. In order for these configurable variables to work correctly, you must set the variables before you import the module. For example:

$blueprint-grid-columns = 12

@import "blueprint/grid"

Because of this, it is common to have one or more partials that set the constants first and get imported before any other imports in your stylesheet(s). This is commonly referred to as the "base" stylesheet and is usually named _base.scss or _base.sass.

回答2:

I had this same issue and in my case the problem was that I was never actually using the _settings.scss file. And since this was the case, none of my changes were being reflected on the site.

If this is the same for you, then what you need to do go to the screen.scss file, make sure its calling @import "app". Once this is confirmed, go to the app.scss file and at the top make sure you call @import "settings". Once you do this, the settings in the _settings.scss file should actually cause an affect on the gutter settings that you want to change.

来源：https://stackoverflow.com/questions/16291093/how-do-determine-gutter-width-in-the-sass-version-of-zurbs-foundation