如何添加當媒體查詢結合特定媒體查詢規則

Question

我有兩個媒體查詢我scss文件合併象下面這樣：

@media all and (min-width: 600px) and (orientation: portrait), 
    // add css rule to the above media query 
    all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { 
     border: 1px solid #red 
     // add specific css rule to current media query only 
    } 

我將如何添加特定的規則在這種情況下，每個查詢？

Answer 1

恐怕你不能那樣做。這是一個查詢，有兩套規則，沒有「當前」查詢。你可以重複在新的查詢規則是這樣的：

@media all and (min-width: 600px) and (orientation: portrait) { 
    // styles 
} 

@media all and (min-width: 600px) and (orientation: portrait), 
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { 
    // shared styles 
} 

PS：你缺少你的例子

Answer 2

您可以使用變量來保存查詢類的聲明。嵌套@media以保持它們的組織性，因爲所有@media規則不會嵌套在CSS中。在@media規則中插入會很好，但它還沒有工作。

$media: 'all and (min-width: 600px) and (orientation: portrait)'; 
$media2: 'all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait)'; 

@media #{$media} { 
    color:red; 

    @media #{$media}, #{$media2} { 
     color:blue; 
    } 
}