用susy更改佈局

Question

當網站變得大於1000像素時，我想將佈局從12列更改爲24。

我的標記

<main> 
    <div class="box-container"></div> 
</main> 

與超對稱

$susy: (
    columns: 12, 
    global-box-sizing: border-box, 
    debug: (image: show) 
); 

$large_layout: layout(24 0 fluid float inside); 

main{ 
    @include container(); 
    background-color: rgba(255,255,0, .2); 
    @include breakpoint(1000px){ 
     @include layout($large_layout); 
     background-color: rgba(0,0,0,1); 
    } 
} 

.box-container{ 
    background-color: rgba(255,0,255, .2); 
    @extend %clearfix; 
    @include span(12); <-- only 50% width 
    @include breakpoint(1000px){ 
     @include squish(2); 
     @include span(20); 
    } 
} 

行爲的SCSS現在是，.box的內容是根據1000像素寬度只有50％。如果我調整我的窗口大於1000px的大小比它工作正常...在我看來，總是應用24列布局。

如果我理解它是正確的，如果沒有設置其他susy設置，默認佈局應該是$ susy。但在我的情況下，我只設置超過1000px的$ large_layout，所以在1000px下它應該採用默認的$ susy佈局

並且還有一個問題是，如果佈局更改顯示24色的網格從12到24列的變化......

http://codepen.io/destroy90210/pen/MKKooP?editors=110

UPDATE

好發現了它是如何工作的。如果我寫的類此行

@include layout($large_layout); 

具有斷點

.box-container{ 
    background-color: rgba(255,0,255, .2); 
    @extend %clearfix; 
    @include span(12); 
    @include breakpoint(1000px){ 
     @include layout($large_layout); <-- moved this line inside this breakpoint 
     @include squish(2); 
     @include span(20); 
    } 
} 

那麼它將按預期工作。

現在我將.box容器複製爲.box-container2，並且希望將寬度始終設置爲主元素的一半。

<main> 
    <div class="box-container"></div> 
    <div class="box-container2"></div> 
</main> 

.box-container2{ 
    @include span(6); 
    @extend %clearfix; 
    background-color: rgba(150,100,50, .5); 
} 

但它只有1/4的寬度和1000px以下的寬度。它看起來像24列網格仍然存在。

我做錯了什麼？

更新codepen http://codepen.io/destroy90210/pen/MKKooP?editors=110

希望有人可以給我解釋一下我的錯誤;）

格雷戈爾;）

Answer 1

我找到了答案;）

Susy 2.1.3 issue regarding layout change on breakpoint

@米里亞姆埃裏克蘇珊娜給了答案呃我需要什麼來解決我的問題;）

.box-container{ 
    height: 300px; 
    background-color: rgba(255,0,255, .5); 
    @include span(12); 
    //this works 
    @include susy-breakpoint(1000px, $large_layout) { 
     @include squish(4); 
     @include span(16); 
    } 
    //or this works 
    @include breakpoint(1000px) { 
     @include with-layout($large_layout){ 
      @include squish(2); 
      @include span(20); 
     } 
    } 
}