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

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

所以，然后在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 mixin。

内传递新网格上的任何项目

以下是您的实际操作：

首先，+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)。