css - 网格中的 Susy 2 网格

Question

我定义了以下网格:

$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 像素宽度回退仍然没有出现。这是在筹备中吗？ (不着急，只是我知道)。

有什么想法吗？

Answer 1

添加背景来源和剪辑。这些将在下一个预发布版中自动添加，但现在您必须手动添加它们:

.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 中修复它。