Susy 中的装订线宽度问题答案

【问题标题】：Gutter Width Issues in SusySusy 中的装订线宽度问题
【发布时间】：2015-09-04 14:58:20
【问题描述】：

我有一个 24 Susy 列网格。我正在尝试制作一些框，每个框将跨越 6 列（因此每行 4 列），但我想在它们周围添加一些排水沟，并带有一个 24 列宽的更宽的容器。不幸的是，无论我尝试什么，我都无法让它工作。似乎柱子没有调整它们的宽度以适应排水沟......我认为苏西应该这样做，不是吗？我对这一切都很陌生，所以我已经阅读了很多文章和帖子，但无法弄清楚这个答案，所以非常感谢您提供的任何帮助。

代码如下：

.solutionThumbnails {
  @include span(24 no-gutters);
  @include container;
  @include clearfix; 
  li {
    @include span(6);
    @include gutters(8px after);
    background: #666;
    float: left;
    height: 240px;
    display: block;
    &:nth-child(4) {
      margin-right: 0px;
    }
  }
}

这就是它现在的样子，否则忽略格式，仍在编码:)（你会看到它把第四个项目打倒了）： http://i.stack.imgur.com/5tmWp.jpg

【问题讨论】：

标签： html css grid susy gutter

【解决方案1】：

因为 Sass 不知道 DOM，所以 Susy 不知道您的 span 和 gutter 混合被应用于同一个元素，或者以任何方式相关。当 Susy 拥有所有信息时，它将处理数学。我想你想要something like this？

.solutionThumbnails {
  @include container(24);

  li {
    @include gallery(6 of 24 split);
    background: #666;
    height: 240px;
  }
}

我不知道你的设置，或者你需要的输出的许多细节，但这应该会让你接近。你不需要在同一个元素上设置 span、container 和 clearfix —— container mixin 可以处理所有这些。同样，gallery 处理相同大小项目的一致布局所需的一切。

我的示例并没有准确地为您提供 8 像素的排水沟。将静态 (px) 排水沟与流体 (%) 网格混合的唯一方法是在元素内部移动排水沟。您可以通过根据需要更改装订线比率来近似 8px 装订线和流动值。默认比率为.25。

【讨论】：