XY网格-SASS-柱边距/檐槽 我正在用Zurb基金会5.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基金会的文件确实缺少一些例子…我尝试使用

$gotter输出：false

，但它不起作用。

是否在父（/container）而不是子（/cells）上设置了gotter

我打赌您可以通过将边距设置为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;
        }
     }
  }

---

不是在父级（/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;
        }
     }
  }

---

我真傻。答案很简单：

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

---

我真傻。答案很简单：

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

---

您也可以实现同样的功能，而无需添加任何额外的SCS（这将为您的应用程序/站点的已编译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>

3个细胞
3个细胞
3个细胞
3个细胞

您也可以实现同样的效果，而无需添加任何额外的SCS（这将为您的应用程序/站点编译的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>

3个细胞
3个细胞
3个细胞
3个细胞

我试过了，它确实删除了页边距，但不再占用整页的宽度：应该有一个sass选项来实现这一点。如果您查看文档，使用CSS类（带或不带水槽）是可行的，事实上，这可以通过mixin直接实现！我试过了，它确实删除了页边空白，但是它不再占用整页的宽度：应该有一个sass选项来实现这一点。如果您查看文档，使用CSS类（带或不带水槽）是可行的，事实上，这可以通过mixin直接实现！使用SASS版本的想法是不使用CSS类。当您想要进行全局更改时，CSS类在大型项目中是一个问题，您必须修改所有html模板。而且它不会添加更多的CSS，占用的空间非常小。使用SASS版本的想法是不使用CSS类。当您想要进行全局更改时，CSS类在大型项目中是一个问题，您必须修改所有html模板。而且它不会添加更多的CSS，实际上占用的空间非常小