有條件的媒體查詢

我錯過了什麼，以便只使用useTablet設置爲true下面的媒體查詢？有條件的媒體查詢

@useTablet: true; 
@tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)"; 

.footer{ 
    width: 100%; 
    @media @tablet when (@useTablet = true){ 
     width: 768px; 
    } 
}

ParseError: Missing closing ')' on line 12, column 31: 
11  width: 100%; 
12  @media @tablet when (@use = true){ 
13  width: 768px;

來源

2016-01-20 filur

爲什麼要使用@媒體@平板電腦時（@useTablet =真），如果你可以只使用@媒體（min-width：720px）.footer css中？ –

@StefanNeuenschwander因爲我想控制是否從配置文件中應用媒體查詢樣式。 – filur

好的，但是沒有可用的CSS的本地IF/ELSE。像SASS（和Compass）這樣的CSS預處理器可以提供幫助，但是如果您正在尋找更多功能特定的if/else條件，您應該試試Modernizr。 –

不，再少不允許直接在媒體查詢（或任何其他的規則）語句中使用警衛。儘管將媒體塊嵌套在防護塊中並不是問題，反之亦然。例如：

@use-tablet: true; 
@tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)"; 

.footer { 
    width: 100%; 
    & when (@use-tablet) { 
     @media @tablet { 
      width: 768px; 
     } 
    } 
}

在現代欠它通常是更實際的抽象整個事情經過的mixin：

// usage 

@use-tablet: true; 

.footer { 
    width: 100%; 
    .tablet({ 
     width: 768px; 
    }); 
} 

// impl. 

.tablet(@style) when (@use-tablet) { 
    @media only screen 
     and (min-width: 720px) 
     and (max-width: 959px) 
      {@style();} 
}

來源

2016-01-20 15:15:45

我想出了另一個使用mixins的版本，但我喜歡你的例子。謝謝！ – filur

有條件的媒體查詢

回答

相關問題