css - 整洁的响应式水平排水沟

Question

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

直接使用 $gutter 变量可以工作，只是在缩小视口时不会调整填充。

有人对此有解决方案吗？

Answer 1

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

padding: flex-gutter();

作品。

有谁知道这是否有任何缺点？

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

所以我有点自己的最大利润：

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

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

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