CompassSusy嵌套网格未提供正确的列宽/边距

Question

我用susy设置了一个主网格，然后在footer元素中使用Susy的with-grid-settings() mixin生成一个稍微不同的网格，如下所示：

footer
  +span-columns(5 omega, 5)
  +with-grid-settings(5, 174px ,20px ,0)
    +container
    @if $dev-mode-footer == true
      +susy-grid-background
    height: 240px

因此，mixin应该跨越所有5个主列，并包含一个宽度略有不同的新网格，并使用container footer来应用它。

因此，在footer中，我有一些ul，它们被设置为每列跨度1列，但左边距实际上是双倍的。

下面是CSS：

footer
  .banner
    +span-columns(5 omega, 5)
    height: 187
    border-top: 3px solid $highlight-1
    border-bottom: 3px solid $highlight-1
    padding: 10px 0

    ul
      +pie-clearfix

    li
      +span-columns(1, 5)
      border-right: 1px dotted $highlight-2
      padding-left: 35px

和一张结果的图片：

​

​

它只是看起来像是在与错误的网格上下文对齐。这是否与两个网格具有相同的列数或其他因素有关？

Answer 1

抱歉，事情不是这样的。这真的是一个概念上的问题。Susy可以帮助你设计网格，但是网格本身并不存在。应用container不会建立除适当的最大宽度之外的任何内容。该容器对其内部的网格没有任何了解。同样，with-grid-settings也不能影响自身之外的任何东西。新网格上的任何项都必须传递到with-grid-settings混合中。

下面是你实际在做的事情：

首先，+span-columns(5 omega, 5)没有做任何有用的事情。你刚刚向右浮动了一个项目，并应用了100%的宽度。但是默认情况下，块元素跨越了它们的整个上下文，所以没有真正的变化--只是额外的代码。您可能想要这样做的一个效果是清除浮点数，但是您应该使用clearfix来实现这一点。

然后，在相同的元素上，container只需设置一个新的max-width和自动边距。也就是说，实际上，所有的容器都是--在这种情况下，您不需要它。新的嵌套网格不需要新的容器。您所需要的就是with-grid-settings。

以下是我对你真正想要的东西的猜测：

footer
  +clearfix
  +with-grid-settings(5, 174px ,20px ,0)
    @if $dev-mode-footer == true
      +susy-grid-background
    height: 240px
    .banner
      +clearfix
      height: 187
      border-top: 3px solid $highlight-1
      border-bottom: 3px solid $highlight-1
      padding: 10px 0

      ul
        +pie-clearfix

      li
        +span-columns(1, 5)
        border-right: 1px dotted $highlight-2
        padding-left: 35px

您可能还需要在li上使用nth-omega(5n)。