基金會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> 

如何改變電網XY細胞之間的默認填充寬度？

Answer 1

原來我沒有使用正確的變量

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

曾任職