整洁灵敏的水平装订线

Question

使用 Neat 框架时，列的间距会自动调整为 window 大小（当然，这是网格框架所期望的）。 在我当前的项目中，我想使用 gutter-width ($gutter) 作为某些元素的顶部或底部填充。

直接使用 $gutter 变量就可以了，只是在缩小视口时不会调整内边距。

有人对此有解决方案吗？

Answer 1

好吧，我问这个问题有点太快了。我浏览了一下 Neat 代码，显然使用了

padding: flex-gutter();

有效。

有人知道这是否有缺点吗？

编辑：好吧，我发现了缺点。 flex-gutter()，或使用 bourbon 函数 pad()（除填充外结果相同），定义 padding/margin 大约 2.3%。问题是，当您在大屏幕上查看网格时，填充会变得很大（而网格上的间距最大为 25px。

所以我自己设定了最大保证金：

 margin-bottom: 25px;
 @media (max-width: 1100px) {  margin-bottom: flex-gutter();}

第一行定义最大边距，第二行设置 flex-gutter 如果你的视口小于 1100 像素（我的 Neat 最大网格尺寸）。

很想知道我是否可以在 sass 函数中实现它！