0

我对 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 问题仍然存在。

4

0 回答 0