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

Question

我想在Zurb Foundation 6.6中使用XY网格的混合生成一个网格，但是当我只想在特定的断点上设置网格本身的负边距时，就会遇到问题。

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

在下面的示例中，我希望断点（中）具有一个没有边距装订线的单元。

这是怎么做的？

感谢您的帮助！

.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贴图；