如何使用SASS插值定位兩個媒體查詢？

-1

$mobile: "only screen and (max-width : 767px)"; 
$tablet: "only screen and (min-width : 768px) and (max-width : 1024px)"; 
$desktop: "only screen and (min-width : 1025px)";

我可以做到這一點沒有任何問題：

@media #{$mobile} { 

    /* my styles for mobile displays */ 

}

但我怎麼能針對在同一時間媒體查詢？

這給了我一個語法錯誤：

@media #{$mobile + "and" + $tablet} { 

    /* my styles for mobile and tablet displays */ 

}

有人能幫忙嗎？

來源

2014-06-18 Tintin81

這不會給你的CSS錯誤，但略有不同，你需要：

@media #{$mobile}, #{$tablet} { 
    /* my styles for mobile and tablet displays */ 
}

從MDN文檔：

Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.

的事情是，Concat的，你是用繩子做插值不是編譯爲有效的CSS。詳細瞭解媒體查詢邏輯here。

來源

2014-06-18 17:25:08 Drops

真棒，謝謝！ – Tintin81

將來，請避免回答重複的問題。插值是一個特定於Sass的構造（請注意標籤上寫着「sass」）。 – cimmanon

我認爲@Drops回答了這個問題真是太棒了，因爲它與上面發佈的「重複問題」完全不同。再次感謝。 – Tintin81

，如果你想使用它們作爲一個and回答上述作品爲or聲明http://css-tricks.com/logic-in-media-queries/

如下。

$mobile: "(max-width : 767px)"; 
$tablet: "(min-width : 768px) and (max-width : 1024px)"; 
$desktop: "(min-width : 1025px)"; 

@media only screen and #{$mobile} and #{$tablet} { 
    /* my styles for mobile and tablet displays */ 
}

輸出

@media only screen and (max-width: 767px) and (min-width: 768px) and (max-width: 1024px) { 
    /* my styles for mobile and tablet displays */ 
}

一個例子：http://sassmeister.com/gist/3784cbe7eca84039ec75

來源

2014-06-19 06:55:03

'...但這是有效的和或.'克里斯，CSS技巧：D – Drops

@Drops oops :)。 –

這太好了，非常感謝！ – Tintin81

如何使用SASS插值定位兩個媒體查詢？

回答

相關問題