css - 如何在 zurbs foundation 的 sass 版本中确定 gutter-width

Question

应该比较简单，我想不通。

我有这个:

.parent
   @include grid-row()


.main
    @include grid-column(8)

.sidebar
    @include grid-column(4)

“主要”元素和“侧边栏”元素最终紧挨着彼此放置，没有间距。

我可以在网格文档中看到有一个名为 $column-gutter 的变量，并且它有一个默认设置。但是我看不到它的效果。

在文件 _grid.scss 中，我可以看到 $column-gutter。它有一个默认值，我已经摸过了。但它对连续并排的元素没有影响。这些元素没有间距。

那么我该如何使用该变量，或以其他方式设置装订线宽度？

Answer 1

您应该在导入 Foundation 之前设置配置变量的值。

参见 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"

因此，通常有一个或多个部分首先设置常量并在样式表中的任何其他导入之前导入。这通常称为“基础”样式表，通常命名为 _base.scss 或 _base.sass。