與Susy網格背景

Question

我有這些風格：

+with-layout(8 1/4) 
    .fact-circle-container 
    +container(show) 
    +clearfix 
    font-size: 4px 
    padding: 0 30px 

    li 
     +gallery(2) 

我的網格項目正常排隊。在這種情況下，每個<li>橫跨兩個8列，但是當我打開網格背景顯示如上圖所示，我得到下面的輸出：

任何想法，爲什麼它這樣做呢？當然，我應該看到8列？

感謝， 尼爾

更新1：

所以，background-size語句時，被淘汰是不正確的輸出這樣background-size: 8.47458%, 100% 1.5;

這似乎是將我的基線高度設置由於某種原因而結束。我ahve通過改變我$base-line-height可變像7.5一些奇怪確認這與此改變的輸出： background-size: 8.47458%, 100% 7.5;

更我的代碼包括初始基線高度設置的位爲下面：

// Line heights 
// ============ 
$base-line-height:     7.5; 
$header-line-height:    1.25; 

// Font weights 
// ============ 
$base-font-weight:     400; 
$header-font-weight:    700; 

// Font colours 
// ============ 
$base-font-color:     $color-nt-grey; 
$base-link-color:     $color-nt-bright-blue; 
$base-link-hover-color:    saturate($base-link-color, 20%); 
$base-link-visited-color:   saturate($base-link-color, 20%); 

// Other sizes 
// =========== 
$base-border-radius: 3px; 
$base-spacing: $base-line-height * 1em; 
$base-z-index: 0; 

$fixed-font-family:     "Andale Mono", AndaleMono, monospace; 
$fixed-font-size:     15px; 
$fixed-line-height:     1.2; 

$base-background-color: $color-white; 

$separator-width:     1px; 
$separator-style:     dashed; 
$separator-color:     $color-nt-dark-blue; 

$rhythm-unit:      'rem'; 

$p-margin:       0.7 * $base-font-size; 
$list-indent:      20px; 

// Susy grid settings 
// ================== 
$susy: (
    flow: ltr, 
    math: fluid, 
    output: float, 
    gutter-position: after, 
    container: 1440px, 
    container-position: center, 
    columns: 12, 
    gutters: .25, 
    column-width: false, 
    global-box-sizing: border-box, 
    last-flow: to, 
    debug: (
    image: hide, 
    color: rgba(#66f, .25), 
    output: background, 
    toggle: top right, 
), 
    use-custom: (
    background-image: true, 
    background-options: false, 
    box-sizing: true, 
    clearfix: false, 
    rem: true, 
) 
); 

任何想法爲什麼行高被添加在這裏沒有明顯的原因？

Answer 1

Susy背景網格使用background-size將單個列漸變（您在那裏看到的）轉換爲正確數量的重複列（您期望的8個）。我猜你已經在其他地方重寫了background-size設置，在代碼中你還沒有包含在這裏？

但是我不能用你粘貼的代碼重現錯誤，所以這只是一個猜測。

更新：

你base-line-height正在輸出作爲與Susy與北斗集成的一部分 - 爲了顯示你的基線網格，以及您的柱網。指南針base-line-height設置在px，這將在這裏工作。顯然，我們應該對整合有點聰明。你能在Github上提出問題嗎？

與此同時，您可以使用show-columns而不是show來解決此問題，當您想要查看背景網格時。

+container(show-columns) 

作爲一個側面說明，container混入包括clearfix，所以你clearfix混入在這種情況下是多餘的。