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

Question

在 Foundation 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);
  }
}

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