Foundation 6在小断点处更改间距大小

Question

在Foundation6中，有没有一种方法可以将小断点中的间隔大小更改为与settings.scss中的间隔大小不同的值？现在，我将$grid-column-gutter设置为90px，但当站点处于小断点时，我希望将大小设置为30px。那么最好的方法是什么呢？

Answer 1

我还没有机会在6中进行非常广泛的工作。但我相信你正在寻找一些混合的组合，因为基础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);
  }
}

不确定是否需要使用不同的类。但我认为这应该是一个很好的开始。从Foundation6文档的"Grid"和"Media Queries"部分获得了代码片段。