使用 susy 更改布局答案

【问题标题】：Change layout with susy使用 susy 更改布局
【发布时间】：2015-12-17 04:22:47
【问题描述】：

当网站大于 1000 像素时，我想将布局从 12 列更改为 24 列。

我的标记

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

和带有 susy 的 scss

$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-content 仅低于 1000px 宽度的 50%。如果我将窗口大小调整为大于 1000 像素，则它可以正常工作......在我看来，总是应用 24 列布局。

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

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

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

更新

好的，了解它是如何工作的。如果我写这行

@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-container 复制为 .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);
}

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

我做错了什么？

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

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

格雷格 ;)

【问题讨论】：

标签： html css layout grid susy

【解决方案1】：

我找到了答案；）

Susy 2.1.3 issue regarding layout change on breakpoint

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

【讨论】：