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

【问题标题】：How to define grid margins for each breakpoint when semantically building a Foundation XY-grid在语义上构建基础 XY 网格时如何为每个断点定义网格边距
【发布时间】：2020-08-21 19:52:31
【问题描述】：

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

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

【问题讨论】：

标签： sass zurb-foundation xy-grid

【解决方案1】：

我会用

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

在你的.cell上混入

将装订线设置为 px 或 rem 值或 Sass 映射；

【讨论】：