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)。