Question

所以我在我的最新网站上插件，添加媒体查询断点，让我的网格在不同的屏幕宽度上做这件事。

// BREAK POINTS
@media only screen and (min-width: 580px) {
    @import "gridset/small";
}

这是我的app.scss。它用codekit编译，我的媒体查询做他们的事情。甜。例如，在gridset / small中，这可以工作和编译，并且很好。

//SUBNAV
subnav {@include column(2);
    previous {}
    index {}
    next {}
}

//FOOTER
footer {@include column(16); @include offsetBy(0);}

子网获得适当的宽度，页脚也是如此。现在我给我的“previous”元素赋予这个媒体适当的宽度。

//SUBNAV
subnav {@include column(2);
    previous {@include column(16); @include offsetBy(0)}
    index {}
    next {}
}

//FOOTER
footer {@include column(16); @include offsetBy(0);}

和CodeKit中断。停止编译。我得到一个有加载栏的屏幕做它的事情，它说“编译”，但它永远不会编译。如果我删除了我刚刚添加的那些代码，它编译得很好。再次工作。现在奇怪的是：如果我这样做

//SUBNAV
subnav {@include column(2);
    previous {@include column(16); @include offsetBy(0)}
    index {}
    next {}
}

//FOOTER
//footer {@include column(16); @include offsetBy(0);}

它汇编！有用！我得到了我的“subnav”宽度和我的“previous”宽度，但当然我没有得到页脚声明。

世界上到底发生了什么？

EDIT 做了一点实验，这是完全导入。将所有内容都移动到一个.scss中，这就是整个事情。

@media only screen and (min-width: 580px) {
//HEADER
header {@include column(16); @include offsetBy(0);
    professional {@include column(3); @include offsetBy(2);}
    landau {@include column(6);}
    poetic {@include column(3);}
}

//ACCUEIL
section {@include column(10); @include offsetBy(3)}
section.left {@include column(10); @include offsetBy(3)}
pullquote {@include column(10); @include offsetBy(3);
    h1 {
        @include Calluna44Point;
        margin-top: 3*$pica;
        margin-bottom: 3*$pica;
    }
}

//INDEX
post_title {@include column(8); @include offsetBy(4)}
post_preview {@include column(8); @include offsetBy(4)}

//PROJECT
content {
    post_content {@include column(16); @include offsetBy(0)}
    section.index {@include column(10); @include offsetBy(3);}
    section {@include column(3);}
}

//SUBNAV
subnav {@include column(2);
    previous {@include column(16); @include offsetBy(0)}
    index {@include column(16); @include offsetBy(0)}
    next {@include column(16); @include offsetBy(0)}
}

//FOOTER
footer {@include column(16); @include offsetBy(0);}
}

这不起作用。这有效。

@media only screen and (min-width: 580px) {
//HEADER
header {@include column(16); @include offsetBy(0);
    professional {@include column(3); @include offsetBy(2);}
    landau {@include column(6);}
    poetic {@include column(3);}
}

//ACCUEIL
section {@include column(10); @include offsetBy(3)}
section.left {@include column(10); @include offsetBy(3)}
pullquote {@include column(10); @include offsetBy(3);
    h1 {
        @include Calluna44Point;
        margin-top: 3*$pica;
        margin-bottom: 3*$pica;
    }
}

//INDEX
post_title {@include column(8); @include offsetBy(4)}
post_preview {@include column(8); @include offsetBy(4)}

//PROJECT
content {
    post_content {@include column(16); @include offsetBy(0)}
    section.index {@include column(10); @include offsetBy(3);}
    section {@include column(3);}
}

//SUBNAV
//subnav {@include column(2);
    //previous {@include column(16); @include offsetBy(0)}
    //index {@include column(16); @include offsetBy(0)}
    //next {@include column(16); @include offsetBy(0)}
//}

//FOOTER
footer {@include column(16); @include offsetBy(0);}
}

这也有效：

@media only screen and (min-width: 580px) {
//HEADER
//header {@include column(16); @include offsetBy(0);
    //professional {@include column(3); @include offsetBy(2);}
    //landau {@include column(6);}
    //poetic {@include column(3);}
}

//ACCUEIL
section {@include column(10); @include offsetBy(3)}
section.left {@include column(10); @include offsetBy(3)}
pullquote {@include column(10); @include offsetBy(3);
    h1 {
        @include Calluna44Point;
        margin-top: 3*$pica;
        margin-bottom: 3*$pica;
    }
}

//INDEX
post_title {@include column(8); @include offsetBy(4)}
post_preview {@include column(8); @include offsetBy(4)}

//PROJECT
content {
    post_content {@include column(16); @include offsetBy(0)}
    section.index {@include column(10); @include offsetBy(3);}
    section {@include column(3);}
}

//SUBNAV
subnav {@include column(2);
    previous {@include column(16); @include offsetBy(0)}
    index {@include column(16); @include offsetBy(0)}
    next {@include column(16); @include offsetBy(0)}
}

//FOOTER
footer {@include column(16); @include offsetBy(0);}
}

或者dang，即使这样有效：

@media only screen and (min-width: 580px) {
//HEADER
header {@include column(16); @include offsetBy(0);
    professional {@include column(3); @include offsetBy(2);}
    landau {@include column(6);}
    poetic {@include column(3);}
}

//SUBNAV
subnav {@include column(2);
    previous {@include column(16); @include offsetBy(0)}
    index {@include column(16); @include offsetBy(0)}
    next {@include column(16); @include offsetBy(0)}
}

//FOOTER
footer {@include column(16); @include offsetBy(0);}
}

这里是否有某种最大线路上限？为什么它会在一定数量的声明后停止？

Codekit，SASS和媒体查询的奇怪和任意问题（编译问题）

0 个答案: