我在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,问题依然存在。