使用susy更改布局

Question

当站点变得大于1000px时，我想将布局从12列更改为24列。

我的标记

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

以及具有susy 的scs

$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);
    }
}

现在的行为是.box内容在1000px宽度下仅占50%。如果我调整窗口大小大于1000px，效果会很好。。。在我看来，24列布局总是适用的。

如果我理解正确，如果没有设置其他susy设置，默认布局应该是$susy。但在我的情况下，我只将$large_layout设置为超过1000px，因此在1000px以下，它应该采用默认的$susy布局

还有一个问题是，如果布局从12列更改为24列，是否也可以更改显示24列的网格。。。

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

更新

Ok了解了它的工作原理。如果我写这行

@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);
}

但它的宽度只有1000px上下的四分之一。看起来24列网格仍然存在。

我做错了什么？

更新的代码笔http://codepen.io/destroy90210/pen/MKKooP?editors=110

希望有人能解释我的错误；）

gregor；）

Answer 1

我找到了答案；）

Susy 2.1.3关于断点布局更改的问题

@Miriam Eric Suzanne给出了我解决问题所需的答案；）

.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);
        }
    }
}