使用 Susy's span 函数的嵌套拆分排水沟



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的分割排水沟网格要求父元素格外宽(跨越自己的排水沟),而子元素则很窄(排水沟将其推到位)。如果在父级上使用nest(例如span(5 nest)),则这将由mixin自动处理。

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

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

我举了一些关于codepen的例子——你有什么,Susy期望什么,以及after黑客是如何工作的。

Susy2.x没有更好的方法来处理这种情况,因为它不是预期的用例。Susy 3.x将允许你分别控制父母和孩子的分布(窄或宽),以在任何情况下获得你需要的数学。

相关内容

  • 没有找到相关文章

最新更新