css - 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 混合来应用它。

因此，在 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% 的宽度。但是 block 元素默认跨越它们的完整上下文，所以没有真正的变化——只是额外的代码。您可能希望从中获得的一个效果是清除 float ，但您应该使用 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)。