Susy at-breakpoint最大寬度媒體查詢

Question

我正在嘗試使用@include at-breakpoint mixin創建具有max-width: 600px的媒體查詢。

.selector { 
    @include at-breakpoint(4, 600px){ 
    // ... 
    } 
} 

將輸出下面媒體查詢：

@media (min-width: 300px) { 
    // ... 
} 

我的印象是，at-breakpoint混入接受3個參數，爲：最小寬度，佈局設計和最大寬度。

但是，當使用這樣的：

.selector { 
    @include at-breakpoint(1px, 4, 600px){ 
    // ... 
    } 
} 

我得到以下編譯錯誤：

Mixin at-breakpoint takes 2 arguments but 3 were passed 

但我沒有得到任何錯誤，當我用這個，即使是$tablet-layout經過3個參數。

.selector { 
    @include at-breakpoint($tablet-layout){ 
    // ... 
    }  
} 


$tablet-width:    600px; 
$tablet-columns:    12; 
$tablet-sidebar-columns:  4; 

$desktop-width:    780px; 
$desktop-columns:   12; 
$desktop-sidebar-columns: 4; 

$tablet-layout:  $tablet-width $tablet-columns $desktop-width; 
$desktop-layout:  $desktop-width $desktop-columns $tablet-width; 

所以我的問題是：什麼，就是以一個與Susy媒體max-width: 600px查詢正確的方法是什麼？

Answer 1

你有正確的想法，但你需要做的是沒有逗號：

@include at-breakpoint(4 600px); // max-width: 600px; 
@include at-breakpoint(1px 4 600px) // min-width: 1px; max-width: 4px; 

這就是爲什麼你的其他組合變量的工作 - 他們都得到作爲一個列表參數傳遞。