如何使用Susy-compass'at-breakpoint'？

Question

<section class="container"> 
    <div class="content> 
    <article>MainContent</article> 
    <aside>SideBar</aside> 
    </div> 
</section> 


.content { 
    @include container; 
    @include at-breakpoint(0 768px 10) { 
    @include container(10, 10); 
} 
article { 
    @include span-columns(9, $total-columns); 
} 
aside.sidebar { 
    @include span-columns(3 omega, $total-columns); 
} 

這是我的html結構和susy-compass。我正在嘗試使用Susy網格來構建一個響應式Web模板。 我想要12列960像素的桌面，10列768像素的平板電腦和4列320像素的手機，但我無法弄清楚。我一直試圖在768px的包含10列的斷點處，但默認的12列仍然不會變爲10列。

任何想法？並建立這樣的模板的任何好建議？

Answer 1

任何你想在斷點處改變的東西都必須進入at-breakpoint。傳遞給container的參數實際上是at-breakpoint的快捷方式，所以你不會在裏面使用它們。你想是這樣的：

$total-columns: 4; 
$container-width: 320px; 

$tablet-width: 768px; 
$tablet-columns: 10; 
$desktop-width: 960px; 
$desktop-columns: 12; 

.content { 
    @include container; 
    @include at-breakpoint($tablet-width $tablet-columns) { 
    width: $tablet-width; 
    } 
    @include at-breakpoint($desktop-width $desktop-columns) { 
    width: $desktop-width; 
    } 
} 

article { 
    // mobile styles & tablet breakpoint could go here... 
    @include at-breakpoint($desktop-width $desktop-columns) { 
    @include span-columns(9); // $total-columns is assumed... 
    } 
} 

aside.sidebar { 
    // mobile styles & tablet breakpoint could go here... 
    @include at-breakpoint($desktop-width $desktop-columns) { 
    @include span-columns(3 omega); 
    } 
} 

現在，如果你想看到您各種網格，你還必須包括susy-grid-background在每個斷點（沿側您的容器寬度）。網格背景就像任何其他的Susy mixin--除非你告訴它，否則不知道要爲不同的斷點進行更改。