變化`$列width`的斷點，而不是數我見過

Question

大多數與Susy例子似乎處理的情況，其中，列的數量在給定的斷點改變，即：

$total-columns: 4; 
$large: 12; 

// code based on 4 columns 

@include at-breakpoint($large) { 
    // code based on 12 columns 
} 

但那麼當你希望列的數量保持不變時（例如）只是更改列寬？就像這樣：

$total-columns: 12; 
$column-width: 3em; 

$large: 64em; 
$large-column-width: 3.75em; 

@include at-breakpoint($large) { 
    $column-width: $large-column-width; // automagically changes previously declared column-widths. 
} 

我會用columns()或span-columns()斷點之前，它們的值會自動調整到想要的任何新的列寬，而無需重新聲明他們。

所以......

foo { @include span-columns(4, $total-columns); } 

不會在斷點處改變，但列會的寬度，自動。

這可能嗎？

Answer 1

與Susy 2解決了使用新susy-breakpoint用more powerful shorthand syntax這個問題。但Susy 1方法並不複雜。 mixin是兩個動作的簡單包裝：

1. 設置媒體查詢。
2. 變化的全球與Susy設置內該媒體查詢塊。

我推薦下載斷點（或其他插件喜歡它）來處理媒體查詢方面的事情，但你也可以手工完成。 Susy提供了一個mixin來處理第二部分（with-grid-settings）。如果你把這兩個放在一起，你會有一個更強大的版本at-breakpoint。

$large: 64em; 
$large-column-width: 3.75em; 

@media (min-width: $large) { 
    @include with-grid-settings($column-width: $large-column-width) { 
    // new column-width applied to code in here. 
    } 
}