CompassSusy嵌套電網不給正確的列寬/利潤率

Question

我有超對稱主電網設置，然後在footer元素我用與Susy的with-grid-settings()混入如下生成一個略有不同的網格：

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個主要列，幷包含一個寬度略有不同的新網格，並使用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同樣無法對本身以外的任何東西產生影響。新電網上的任何物品都必須通過mix33中的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 

您可能還需要在李用nth-omega(5n)。