使用 Susy 的静态嵌套网格

Question

我正在用 Susy 试验静态布局，我需要一些关于如何建立具有相同排水沟宽度的嵌套网格的指导。在下面的示例中，我的 .main 跨越 12 列中的 9 列，我希望通过保持相同的 18px 间距宽度使其子 .main-item 在 9 列布局内具有四列布局。

http://sassmeister.com/gist/2a414c2b9dc6f332b89b

这当然可以在流体网格中无缝工作，因为一切都是百分比，但在这个实验中，我想尝试使用静态网格。

最好的方法是什么？ “with-layout” mixin 是否只是通过定义新布局来实现这一目标的可能解决方案，还是有其他方法可以实现这一目标？

到目前为止我已经尝试过： 1. 简单地为 .main-item 提及 span(3 of 12) 知道它不起作用，但仍然试了一下 2. 定义一个新布局并使用 with-layout mixin，但它给我抛出了这个错误“函数有效列数学在没有@return 的情况下完成”。我想我会做错的。

感谢您的建议。

Answer 1

重新定义网格需要大量额外的数学运算，因为您必须计算列的新大小。此外，上下文无关紧要，因为数学与上下文无关。不过，如果您只跨越小数列，它似乎可以工作。您想将 9 列分成 4 列，看起来像这样：

.main-item {
  @include span(9/4);
  &.last{
    @include last;
  }
}