基础6使用SASS更改装订线宽度

时间:2017-10-18 16:13:07

标签: zurb-foundation

我正在使用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单元格之间的默认填充宽度?

1 个答案:

答案 0 :(得分:0)

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

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

曾为