在 Neat 2 中移除外部排水沟答案

【问题标题】：Remove outside gutters in Neat 2在 Neat 2 中移除外部排水沟
【发布时间】：2017-03-06 12:01:59
【问题描述】：

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

在v1 中，我可以在span-columns mixin 中使用block-collapse 来吃掉元素两侧的排水沟，但是，在v2 中，这个mixin 已被删除。 v2 中有一个 grid-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 列之间的排水沟，以便我的侧边栏和容器彼此相邻？

【问题讨论】：

标签： sass neat

【解决方案1】：

您正确地查看了 grid-collapse mixin 来解决这个问题。

要像您描述的那样做一个齐平网格，您的标记将是：

.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);
}

【讨论】：

这似乎有点奇怪。如果我有标记：body > main.wrapper > section.inner > .sidebar + .container 这不会给我一个齐平网格。但是，如果我这样做 body > main > section.wrapper > div.inner > .sidebar + .container 它会给我一个齐平网格。对此有什么想法吗？我宁愿在不必要的时候不必添加额外的标记。
好的，请忽略该评论。显然，我的一个元素有一个最大宽度，并且在故障排除时完全错过了它。感谢您的回答，它有效。
工作 s29.postimg.org/vanq8y0if/neat-visual.png 但如果你使用一个，你需要记住将 @include grid-visual 移动到 .wrapper-inner。
谢谢@whmii。你的解决方案对我有用。我一直在努力解决如何去除外部排水沟空间。

【解决方案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;
    }
  }
}

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

【讨论】：