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

不确定您是否需要使用不同的类。但我认为这应该是一个不错的开始。从 Foundation 6 文档的“网格”和“媒体查询”部分获取代码片段。