使用 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 的传播(窄或宽),以在任何情况下获得您需要的数学。
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 的传播(窄或宽),以在任何情况下获得您需要的数学。