代码之家 › 专栏 › 技术社区 › Pierre

XY网格-SASS-柱边距/檐槽

gutter zurb-foundation-6 zurb-foundation sass

0

Pierre · 技术社区 · 6 年前

我现在用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基金会的文件确实缺少一些例子…我试着用 $gutter-output: false 但它不起作用。

3 回复 | 直到 6 年前

1

2

Pierre 6 年前

我真傻。答案很简单:

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

2

0

Wende Avontuur 6 年前

我打赌只要将边距设置为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;
        }
     }
  }

3

0

nthompson777 6 年前

您也可以实现同样的目标,而无需添加任何额外的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>