使用 Susy 的 span 函数嵌套拆分排水沟答案

【问题标题】：Nested split gutters using Susy's span functions使用 Susy 的 span 函数嵌套拆分排水沟
【发布时间】：2017-06-23 14:39:42
【问题描述】：

Susy 是否有一种内置方法来使用 span 函数而不是 mixin 来解决父母的孩子的问题？这里的孩子最终会很短（正如预期的那样）：

$susy: (columns: 8,  gutters: 0.3, global-box-sizing: border-box, gutter-position: split)


.full_width
    width: span(5)

.three_columns
  width: span(3 of 5)

手动添加装订线 — width: span(3 of 5) + gutter() — 或更改装订线样式 — width: span(3 of 5 after) — 都得到正确的结果，但我不确定是否有更直观的方法，除了编写我自己的 nested-span 函数包装其中之一。

【问题讨论】：

标签： susy susy-sass

【解决方案1】：

Susy 的拆分槽网格期望父元素超宽（跨越它自己的槽），而子元素很窄（槽将其推到位）。如果您在父级上使用 nest，则混入会自动处理该问题 - 例如span(5 nest).

在您的情况下，孩子实际上并没有漏掉一个排水沟——数学完全错了。 Susy 正在尝试计算span / wide-container，但您的容器实际上并不宽。误差几乎是排水沟的宽度，但不完全是。添加排水沟会让您靠近，但并不准确。

after 语法完美运行，因为后排水沟需要一个正常宽度的容器，这就是你所拥有的。基本上，您是在告诉 Susy 划分 span / container 而不是 span / wide-container。

我汇总了 some examples on codepen — 您拥有什么、Susy 期望什么以及 after hack 的工作原理。

Susy 2.x 没有更好的方法来处理这种情况，因为它不是预期的用例。 Susy 3.x 将允许您分别控制父母和孩子的传播（窄或宽），以获得在任何情况下所需的数学。

【讨论】：

完美，谢谢。我会留意 Susy 3.x。