嵌套断点 - 使用Susy span mixin

时间:2015-06-02 14:30:55

标签: css sass susy-compass susy-sass breakpoint-sass

我在Susy中使用嵌套断点。编译后的CSS包含以下行:box-sizing :; 当我不使用嵌套断点时,编译的CSS是正确的。

SASS代码:

@include border-box-sizing;
#list {
    $map: (
        columns: 12,
        gutters: 1/3,
        math: fluid,
        output: float,
        last-flow: from,
        global-box-sizing: border-box,
        gutter-position: after
    );
@include layout($map);
@include clearfix;
> li {
    background: #BAC7D1;
    margin-bottom: 2em;
    @include span(3);
    @include breakpoint(max-width 1099px) {
        @include span(4);// this line make the problem: "box-sizing: ;"
    }
    &:nth-child(4n+4) {
        @include breakpoint(1100px) {
            @include span(3 last);
            background: blue;
        }
    }
    &:nth-child(3n+3) {
        @include breakpoint(max-width 1099px) {
            @include span(4 last);
            background: greenyellow;
        }
    }
}

编译后的CSS(行:box-sizing:;):

#gallery-list {
    overflow: hidden;
    *zoom: 1;
}
#gallery-list > li {
    margin-bottom: 2em;
    width: 23.40426%;
    float: left;
    margin-right: 2.12766%;
}
@media  (max-width: 68.6875em) {
    #gallery-list > li {
        box-sizing: ;
        width: 31.91489%;
        float: left;
        margin-right: 2.12766%;
    }
}
@media  (min-width: 68.75em) {
    #gallery-list > li:nth-child(4n+4) {
        box-sizing: ;
        width: 23.40426%;
        float: left;
        margin-right: 0;
    }
}
@media  (max-width: 68.6875em) {
    #gallery-list > li:nth-child(3n+3) {
        box-sizing: ;
        width: 31.91489%;
        float: left;
        margin-right: 0;
    }
}

我还在另一个网站上使用了Susy的嵌套断点,效果很好。我也试过了susy-breakpoint mixin,问题依然存在。

0 个答案:

没有答案