使用具有斷點的網格設置的示例

Question

我想弄清楚如何使用基於斷點的不同網格設置，但無法使其工作。這是我的代碼。我正在使用響應mixin進行媒體查詢。

$breakpoints: 'screenSmall' 480px 768px, 
       'screenMedium' 768px 1279px, 
       'screenXlarge' 1441px;             

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

[role="main"] { 
    @include container($total-columns); 
    background: #aaa; 
    @include susy-grid-background; 
} 

@include respond-to('screenSmall') 
    @include with-grid-settings(8,4em,1.5em,1em) { 
    [role="main"] { @include container; } 
    }; 
} 

@include respond-to('screenMedium') 
    @include with-grid-settings(12,4em,1.5em,1em) { 
    [role="main"] { @include container; } 
    }; 
} 

Answer 1

究竟是什麼不工作呢？對於不同的斷點沒有任何改變，或者根本沒有改變背景網格圖像？我猜測後者。如果您希望背景，以新的設置作出反應，則需要使用這些設置，重新申報的背景：

@include respond-to('screenSmall') 
    @include with-grid-settings(8,4em,1.5em,1em) { 
    [role="main"] { 
     @include container; 
     @include susy-grid-background; 
    } 
    }; 
} 

@include respond-to('screenMedium') 
    @include with-grid-settings(12,4em,1.5em,1em) { 
    [role="main"] { 
     @include container; 
     @include susy-grid-background; 
    } 
    }; 
} 

當然，我想你可以用at-breakpoint更容易做到這一點，而不是迴應到。但這是一個不同的問題。 :)