基礎6在小折點處更改排水溝尺寸

Question

在基礎6中，是否有方法將小折點處的排水溝大小更改爲與settings.scss中的排水溝大小不同的方式？現在我的$grid-column-gutter設置爲90px，但是當網站處於小斷點時，我希望該尺寸達到30px。什麼是最好的方式來做到這一點？

Answer 1

我還沒有機會在6中工作非常廣泛。但是我相信你正在尋找一些mixin組合，因爲Foundation 6更強調從HTML中抽出課程並使CSS文件更加結構化。看下面的例子可能會對你有所幫助。

.columns { 
    // Only affects medium screens and larger 
    @include breakpoint(medium up) { 
    @include grid-column($columns, 90px); 
    } 

    // Only affects small screens, not medium or large 
    @include breakpoint(small only) { 
    @include grid-column($columns, $gutter); 
    } 
} 

不確定是否需要使用不同的類。但我認爲這應該是一個體面的開始。從Foundation文檔的"Grid"和"Media Queries"部分獲得代碼片段。