使用 Susy 的 span 函数嵌套分割排水沟

Nested split gutters using Susy's span functions

Susy 是否有一个内置的方法来使用 span 函数而不是 mixin 来解释 children 的 parents 和拆分排水沟?这里的 child 最终变得很短(正如预期的那样):

$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 的 split-gutter 网格期望 parent 元素是 extra-wide(跨越它自己的间距),而 child 是窄的(间距将它推入)地方)。如果您在 parent 上使用 nest,那么混音会自动处理——例如span(5 nest).

在您的情况下,child 实际上并没有缺少排水沟 — 数学完全错误。 Susy 正在尝试计算 span / wide-container,但您的容器实际上并不宽。误差几乎是排水沟的宽度,但不完全是。添加装订线会让您接近,但并不准确。

after 语法完美运行,因为 after-gutters 需要一个 normal-width 容器,这就是您所拥有的。基本上,您是在告诉 Susy 划分 span / container 而不是 span / wide-container.

我把 some examples on codepen 放在一起 — 你有什么,Susy 期望什么,以及 after hack 是如何工作的。

Susy 2.x 没有更好的方法来处理这种情况,因为这不是预期的 use-case。 Susy 3.x 将允许您分别控制 parent 和 child 的传播(窄或宽),以在任何情况下获得您需要的数学。