sass - XY Grid - SASS - 列边距/装订线

Question

我目前正在使用 Zurb Foundation 6.5.0 构建一个 4 块布局，如下所示：

这是我当前的代码：

.blocks_4 {

    @include xy-grid;
    text-align: center;

    div {
        @include breakpoint(small) {
          @include xy-cell(12);
        }

        @include breakpoint(medium) {
          @include xy-cell(3);
          // @include xy-cell(3, $gutter-output: false);
        }

    }
}

我想删除块之间的白色排水沟（我画了红色箭头在我的屏幕截图上指出它们），以便它们粘在一起并使用整个页面宽度。

如何使用 SASS 实现这一目标？SASS Foundation 文档确实缺少一些示例...我尝试使用，$gutter-output: false但它不起作用。

Answer 1

傻我。答案很简单：

@include xy-cell(3, $gutters:0);

Answer 2

排水沟不是设置在父级（/container）而不是子级（/cells）上吗？

我敢打赌，您可以通过将边距设置为 0 来覆盖排水沟，如下所示：

.blocks_4 {

    @include xy-grid;
    text-align: center;

    div {
        @include breakpoint(small) {
          @include xy-cell(12);
        }

        @include breakpoint(medium) {
          @include xy-cell(3);
          margin-left:0;
          margin-right:0;
        }
     }
  }

Answer 3

您也可以实现相同的目标，而无需添加任何额外的 SCSS（这将增加您的应用程序/站点的已编译 CSS 文件的权重），并且您只需将 Foundation 的 XY 网格与 HTML 一起使用：

<div class="grid-x text-center">
  <div class="cell medium-3">3 cells</div>
  <div class="cell medium-3">3 cells</div>
  <div class="cell medium-3">3 cells</div>
  <div class="cell medium-3">3 cells</div>
</div>