在语义上构建Foundation XY网格时，如何为每个断点定义网格边距

Question

我想在Zurb Foundation 6.6中使用XY网格的mixin构建一个网格，但当我只想在特定断点上为网格本身设置负边距时，我遇到了问题。

在xy-gutters()中使用mixin会为每个断点创建边距，我不能只为其中一些断点选择使用边距。

在下面的例子中，我希望断点(中等(有一个没有边距槽的单元格。

这是怎么做到的？

.hero {
&__container {
@include xy-grid-container;
}
&__grid {
@include xy-grid();
// This generates gutter margins for all breakpoints so I cannot choose to have without gutters for some breakpoints
@include xy-gutters(
$gutter-type: margin,
$gutter-position: right left,
$negative: true
);
}
&__cell {
@include xy-cell($size: 4, $gutter-type: margin);
@include breakpoint(medium) {
@include xy-cell($size: 6, $gutter-type: none);
}
@include breakpoint(large) {
@include xy-cell($size: 4, $gutter-type: margin);
}
}
}

Answer 1

我会使用

@include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);

在.cell上混合

将排水沟设置为px或rem值或Sass贴图；