Question

我可以使用Foundation XY Grid SASS mixins创建网格装订线变化吗？

例如，我想要一个具有30px装订线的网格和一个10px装订线的网格。网格之间没有其他区别。

<!-- Regular (30px) grid gutter ->
<div class="grid-x grid-margin-x">
  <div class="cell medium-6">
  </div>
  <div class="cell medium-6">
  </div>
</div>

<!-- Custom (10px) grid gutter -->
<div class="grid-x grid-margin-x--small">
  <div class="cell medium-6">
  </div>
  <div class="cell medium-6">
  </div>
</div>

Answer 1

在Foundation v6.5中，可以使用xy-gutters() mixin在元素上生成自定义装订线。但是，对于边缘单元的装订线，装订线的实现方式要求单元宽度用装订线的宽度更新。 xy-cell-static() mixin会解决这个问题。这是一个使用示例：

.grid-margin-x--small > .cell {
  @include xy-cell-static($gutters: 10px);
}

我们知道这并不理想，我们已经在XY Grid API中对v6.6.0进行了一些大的重构和各种改进，以简化自定义网格/单元/装订线的生成。有关更多详细信息，请参见https://github.com/zurb/foundation-sites/pull/11405。

Foundation 6.5-多个XY网格装订线

1 个答案: