帶斷點的嵌套網格

Question

我想爲兩個嵌套網格使用susy。一個定義頁面佈局（左側菜單，右側內容）和一個內部content。

原因是內容是由CMS創建的，其中可以使用不同的模板，我希望將scss代碼與模板一起使用。使用流體網格似乎可以解決這個問題：

<div class="page"> 
    <div class="menu"> 
     <ul><li>foo</li><li>bar</li></ul> 
    </div> 
    <div class="content"> 
     <div class="item">1</div> 
     <div class="item">2</div> 
     <div class="item">3</div> 
     <div class="item">4</div> 
    </div> 
</div> 

@import "susy"; 

/* Outer Grid (Page Layout) */ 
$total-columns : 4; 
$column-width : 1024px/$total-columns; 
$gutter-width : 0px; 
$grid-padding : 0px; 
.page { 
    @include container; 
    .menu { 
     @include span-columns(1); 
    } 
    .content { 
     @include span-columns(3); 
    } 
} 

/* Inner Grid */ 
$total-columns : 1; 
$column-width : 200px; 
$gutter-width : 0px; 
$grid-padding : 0px; 
$container-style: fluid; 
.page .content { 
    @include container; 
    .item { 
     @include span-columns(1); 
    } 
    @include at-breakpoint(3) { 
     @include container; 
     .item { 
      @include span-columns(1); 
     } 
    } 
} 

我的問題是$ column-width：200px;對於內部網格，因爲生成的媒體查詢使用min-widht：600px，儘管此時只有75％的寬度可用。

實現此目的的最佳方式是什麼？

Answer 1

container mixin在嵌套上下文中不起作用。它設置了最大寬度和自動頁邊距（用於頁面居中） - 兩者都已由您的外部容器處理。

我也建議針對1列網格。從你最小的有用網格開始（3），直到你通過你的移動斷點才使用這些列。

在Susy 2.0中它將變得更加清晰，但是列和排水溝寬度主要用於創建比率 - 所以如果您想根據容器寬度設置它們，則使用的單位無關緊要。這聽起來令人困惑，但在這裏我將如何實現你想要的：

$total-columns : 4; 
$column-width : 200px; 
$gutter-width : 0px; 
$grid-padding : 0px; 
$container-width: 1024px; 

基於這些設置，與Susy創建4列沒有排水溝，從可用1024px容器寬度平分秋色。由於您設置了$container-width，因此Susy使用$column-width和$gutter-width來確定比率，並且由於該比率的一邊是0，因此只要是某種東西，則對方的內容無關緊要。這些值的其他用途是計算斷點。我們稍後會看到。現在你可以做你的東西：

.page { 
    @include container; 
    .menu { 
    @include span-columns(1); 
    } 
    .content { 
    @include span-columns(3 omega); 
    } 
} 

和：

.page .content { 
    .item { 
    // Elements span the full width by default, so nothing is needed in mobile view. 
    @include at-breakpoint($total-columns) { 
     @include span-columns(1,3); 
     @include nth-omega(3n); 
    } 
    } 
} 

爲外網的工作就好了內網的設置也是如此。它們實際上並不是不同的網格，只是嵌套在其他元素內部的元素。