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，它將起作用。