Susy，神奇的網格和列

Question

我開始使用Susy，我想要完成一些東西，但我不知道如何，儘管我正在閱讀Susy的文檔和在線教程。

我有這個網站：

<div class="page"> 
    <nav>nav</nav> 
    <div class="main"> 
    <div class="summary"> 
     summary 
    </div> 
    <div class="content"> 
     content 
    </div> 
    </div> 
    <footer>footer</footer> 
</div> 

這些與Susy設置：

$total-columns: 12; 
$column-width: 4em; 
$gutter-width: 1em; 
$grid-padding: $gutter-width; 

$show-grid-backgrounds: true; 

@include border-box-sizing; 

// breakpoint variables 
$M: 30em; 
$L: 50em; 

這SCSS：

.page { 

@include container; 
@include susy-grid-background; 

nav { 
    @include at-breakpoint($M) { 
     @include span-columns(2,12);  
    } 
} 

.main { 
    @include at-breakpoint($M) { 
     @include span-columns(10 omega,12); 
    } 
    .summary { 
     @include at-breakpoint($L) { 
      @include span-columns(2 omega,10); 
     } 
    } 
    .content { 
     @include at-breakpoint($L) { 
      @include span-columns(8,10);  
     } 
    } 

} 
footer {clear: both;} 

如預期那樣的作品，內容是完全流體最大寬度。但是，我想要相同的行爲，但從4列布局開始，然後更改爲8列，然後是12列。

我不喜歡這樣寫道：

$total-columns: 4; 
$column-width: 4em; 
$gutter-width: 1em; 
$grid-padding: $gutter-width; 

$show-grid-backgrounds: true; 

@include border-box-sizing; 

// breakpoint variables 
$M: 30em; 
$L: 50em; 

和SCSS：

.page { 

@include container; 
@include susy-grid-background; 

// Now create a media-query breakpoint at the min-width of 30em and use a larger grid and modify the layout 
    @include at-breakpoint($M 8) { 
    // This will create a new container with a total of 8 columns 
     @include container; 
     @include susy-grid-background; 
    // Now modify the inner elements to their new home 
    nav { @include span-columns(2,8); } 
     .main { @include span-columns(6 omega,8); } 
    } 

    @include at-breakpoint($L 12) { 
    // This will create a new container with a total of 12 columns 
    @include container; 
    @include susy-grid-background; 
    // Now modify the inner elements to their new home 
    nav { @include span-columns(2,12); } 
    .main { 
     @include span-columns(10 omega,12); 
     .content { 
     @include span-columns(8,10); 
     } 
     .summary { 
     @include span-columns(2 omega,10); 
     } 
    } 

    } 

footer {clear: both;} 

} 

這也工作正常，但我不能讓所有的佈局液體作爲第一個例子。例如，在450像素寬的情況下，4列布局不會填充視口。同樣的情況發生在768px，8列不填充視口。我希望佈局始終填充可用寬度（如第一個示例中所示），並根據定義的斷點更改列。

這是正常的Susy行爲還是有可能以另一種方式做到這一點？

對不起，如果這是一個新手問題，但我只是在開始，我想在使用Susy在真正的項目之前澄清事情。

謝謝。

Answer 1

下面是我如何處理響應式網格，也許它會幫助你。

我有比如我定義每個斷點幾個變量（我喜歡的列數來命名）：

// 6 Columns ------------------------------------------------------------------- 
$six-gut-width : .5rem; 
$six-padding : 0; 
$six-width  : 6 * $column-width + 5 * $six-gut-width + $six-padding * 2; 

// 8 Columns ------------------------------------------------------------------- 
$eight-width : 8 * $column-width + 7 * $gutter-width + $grid-padding * 2; 

這樣，我有兩個實際的寬度和列數使用在我的at-breakpoint調用。

然後我斷點打破這樣的：

@include at-breakpoint($six-width 6 $eight-width) { 
    // Breakpoint specific scss 
    .page { set-container-width(6); } 
} 

我想保持斷點具體的東西在自己的部分中斷點目錄（但你不必），即：breakpoints/_6-cols.scss，breakpoints/_8-cols.scss等

如果你想級聯到一個更大的斷點，那麼請關閉第三個參數at-breakpoint()，或將它設置爲高於下一級別的值。另外請確保您在斷點聲明中設置了set-container-width而不是container。退房set-container-width on Susy docs

希望這可以幫助你。祝你好運。