我定义了以下网格:
$main-grid: 12 (remCalc(62.4166667px) remCalc(20px)) after static float
$twelve-fluid: 12 remCalc(15px) after fluid float
+set-grid($main-grid)
$main-grid
正在我的 .container
上设置。我希望将 $twelve-grid
设置在名为 .container__main
的 .container
的子级上,所以我有以下内容:
+use-grid($twelve-fluid)
.container__main
+rem(padding, 20px)
background-color: #ffffff
+background-image(linear-gradient(top, #c4c3b1, #ffffff remCalc(30px)))
+background-image(linear-gradient(top, #c4c3b1, #ffffff 30px))
+background-grid
错误的是网格不适合 .container__main
具有的 20px(或 rem 等效)填充。我怎样才能让它适应这种情况,以便 12 个流体柱的网格适合内部。
我也尝试用 +overlay-grid
替换 +background-grid
但我似乎没有得到任何输出?
rem 像素宽度回退仍然没有出现。这是在筹备中吗? (不着急,只是我知道)。
有什么想法吗?
最佳答案
添加背景来源和剪辑。这些将在下一个预发布版中自动添加,但现在您必须手动添加它们:
.container__main
+background-origin(content-box)
+background-clip(content-box)
这也会剪辑你的其他背景,所以你可以将它包装在一个 mixin 中。像这样:
@mixin show-grid($show: $show-grids)
@if $show and $show != hide
+background-grid
+background-origin(content-box)
+background-clip(content-box)
.container__main
+show-grid
这只是一个临时解决方法 - 使用 alpha 的一部分。我们已经在 susy-next 分支中修复了它,我们很快就会在新的 gem 中修复它。
关于css - 网格中的 Susy 2 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20196281/