SASS看不到变量

Question

我想添加由@media断点确定的边框。我的代码如下：

@media(max-width:767px) { $height: auto; $grid: 1; }
@media(min-width: 768px) and (max-width:991px) { $height: 370px; $grid: 2; }
@media(min-width: 992px) and (max-width:1199px) { $height: 240px; $grid: 4; }
@media(min-width: 1200px) { $height: 195px; $grid: 6; }

article:nth-child(-n+#{$grid}) {
    border-top: 1px solid #353535;
}

SASS返回错误Undefined variable: "$grid"。但我不知道为什么。我该怎么办？

Answer 1

您正在媒体查询范围内定义$grid，然后尝试在该范围之外使用它。

就SASS编译器而言，媒体查询在此时是多余的，因此无法识别$grid。

但是，如果article声明是在其中一个媒体查询中生成的，那么同样如果您在媒体查询之外定义$grid它将起作用。