Foundation 6 使用 SASS 更改装订线宽度

Question

我正在使用 grid-xy 系统，我试图用我的 settings.scss 文件更改 Foundation 6 的装订线宽度，但我没有成功。我的最终目标是让我的单元格之间的间距为 20px 宽而不是 15px。我试着改变我能想到或在我的研究中找到的任何变量。以下是我尝试过的变量列表。

$grid-column-gutter: (
      small: 30px,
      medium: 45px,
);
$column-gutter: rem-calc(20);
$gutters: rem-calc(20);
$gutter: rem-calc(20);
$grid-margin-gutters:  rem-calc(20);

我确定我的 _settings.scss 正在工作，因为我能够更改 $global-width 并且它确实有效果。

这是我正在使用的html

<div class="grid-x grid-padding-x grid-container">
    <div class="cell large-4 medium-6 small-12">
        <h2>Test</h2>
    </div>
    <div class="cell large-4 medium-6 small-12">
        <h2>Test 2</h2>
    </div>
    <div class="cell large-4 medium-6 small-12">
        <h2>Test 3</h2>
    </div>
    <div class="cell large-4 medium-6 small-12">
        <h2>Test 4</h2>
    </div>
    <div class="cell large-4 medium-6 small-12">
        <h2>Test 5</h2>
    </div>
    <div class="cell large-4 medium-6 small-12">
        <h2>Test 6</h2>
    </div>
</div>

如何更改 grid-xy 单元格之间的默认填充宽度？

Answer 1

原来我没有使用正确的变量

$grid-padding-gutters: 40px;
$grid-margin-gutters: 40px;

工作

Foundation 6 使用 SASS 更改装订线宽度

Foundation 6 Change Gutter Width with SASS

zurb-foundation