Фундамент 6.5 - Многочисленные водосточные желоба

Question

Можно ли использовать миксины Foundation XY Grid SASS для создания вариаций желоба сетки?

Например, я хотел бы иметь сетку с желобом 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);
}

Мы знаем, что это не идеально, и мы уже работали над каким-то большим рефакторингом и различными улучшениями для v6.6.0 в XY Grid API, чтобы упростить создание пользовательских сеток / ячеек / желобов. См. https://github.com/zurb/foundation-sites/pull/11405 для получения более подробной информации.