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

Question

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 函数来包装其中一个。

Answer 1

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 的传播（窄或宽），以在任何情况下获得您需要的数学。

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

Nested split gutters using Susy's span functions

susy

susy-sass