在 Neat 2 中移除外部排水沟

Question

我已经升级到 Bourbon Neat v2，其中包括在容器网格的左侧和右侧添加了排水沟。

在 v1 中，我可以在 v2 中的 span-columns mixin to eat the gutters either side of the element, however, in v2 this mixin has been removed. There is a grid-collapse 函数中使用 block-collapse，但这并不像我预期的那样有效。我当前的标记如下（为简洁起见进行了缩减）：

.wrapper {
  @include grid-container; // columns: 12, gutter: 1rem
  @include grid-visual(lime);
}

.sidebar {
  @include grid-columns(2 of 12);
}

.container {
  @include grid-columns(10 of 12);
}

如何移除外部间距，折叠第 2 列和第 3 列之间的间距，以便我的边栏和容器彼此相邻？

Answer 1

您查看 grid-collapse 混合宏来处理这个问题是正确的。

要像您描述的那样制作齐平网格，您的标记将是：

.wrapper {
  @include grid-container;
  overflow-x: hidden;
}

.wrapper-inner {
  @include grid-collapse;
}

.sidebar {
  @include grid-column(2 of 12);
}

.container {
  @include grid-column(10 of 12);
}

Answer 2

只是扩展了最佳答案，您还需要确保在使用多个网格时在 grid-media 声明中包含 grid-collapse，因为 grid-collapse 是基于您的每个网格的装订线值。

.wrapper {
  @include grid-container;
}

.wrapper-inner {
  @include grid-collapse;

  @include grid-media($sm-neat-grid, $md-neat-grid, $lg-neat-grid) {
    @include grid-collapse;
  }
}

.sidebar {
  @include grid-column(1 of 1);

  @include grid-media($sm-neat-grid, $md-neat-grid) {
    @include grid-column(3 of 12)
  }

  @include grid-media($lg-neat-grid) {
    @include grid-column(5 of 15)
  }
}

.container {
  @include grid-column(1 of 1);

  @include grid-media($sm-neat-grid, $md-neat-grid) {
    @include grid-column(9 of 12)
  }

  @include grid-media($lg-neat-grid) {
    @include grid-column(10 of 15)
  }
}

顺便说一下，我的示例使用的是 grid-media 的修改版本，它允许声明多个网格，这些网格将共享相同的值但间距大小不同：

// overrides bourbon-neat grid-media to include more than one grid
@mixin grid-media($grids...) {
  @each $grid in $grids {
    $_media: _retrieve-neat-setting($grid, media);
    $_query: _neat-parse-media($_media);

    @media #{$_query} {
      $_default-neat-grid: $neat-grid;
      $neat-grid: map-merge($neat-grid, $grid) !global;
      @content;
      $neat-grid: $_default-neat-grid !global;
    }
  }
}

我这辈子都记不起我从哪里得到它了，但我在我所有的项目中都用过它

在 Neat 2 中移除外部排水沟

Remove outside gutters in Neat 2

sass

neat