如何在 zurbs 基础的 sass 版本中确定装订线宽度

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/：

许多 Compass 模块使用保护分配来允许您为该模块设置默认值。为了使这些可配置变量正常工作，您必须在导入模块之前设置变量。例如：

$blueprint-grid-columns = 12

@import "蓝图/网格"

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

Answer 2

我遇到了同样的问题，在我的情况下，问题是我从未真正使用过 _settings.scss 文件。既然是这种情况，我的任何更改都没有反映在网站上。

如果这对你来说是一样的，那么你需要做的是去 screen.scss 文件，确保它调用@import "app"。确认后，转到 app.scss 文件并确保在顶部调用 @import "settings"。执行此操作后，_settings.scss 文件中的设置实际上会影响您要更改的装订线设置。