我可以使用媒體查詢設置全局變量嗎？

Question

我有一個代碼味道，看起來像這樣：

$mobile-bg-color: #ddddff; 
$desktop-bg-color: #ffdddd; 
$mobile-border: solid 2px black; 
$desktop-border: solid 2px red; 



div { 
    margin: 50px;  

    @media screen and (max-width: $mobile_threshold){ 

     background-color: $mobile-bg-color; 
     border: $mobile-border; 


    } 

    @media screen and (min-width: $mobile_threshold + $threshold_step){ 

     background-color: $desktop-bg-color; 
     border: $desktop-border; 

    } 

} 

，我有這樣做的任何地方的細節可能是移動和桌面之間的不同。

我真正想要做的是：

div { 
    margin: 50px; 
    border: $responsive-border; 
    background-color: $responsive-bg-color; 
} 

這是可能的使用無禮？

Answer 1

您可以通過mixin來實現此目的。定義一個mixin，像這樣：

@mixin responsive-border {  
    @media screen and (max-width: $mobile_threshold){ 
     background-color: $mobile-bg-color; 
     border: $mobile-border; 
    } 

    @media screen and (min-width: $mobile_threshold + $threshold_step){ 
     background-color: $desktop-bg-color; 
     border: $desktop-border; 
    } 
} 

然後調用它像這樣：

div { 
    margin: 50px; 
    @include responsive-border; 
} 

您可以爲任何一組，你會經常使用的規則做。 Mixin有助於保持代碼乾爽。

Answer 2

擴展jmargolisvt的答案 - 你也可以將一個屬性的名稱傳遞給mixin，並讓它解決這個問題。

例如。

@mixin responsive-bg-color ($prop){ 
    @media screen and (max-width: $mobile_threshold){  
     #{$prop} : #ddddff; 
    } 

    @media screen and (min-width: $mobile_threshold + $threshold_step){ 
     #{$prop} : #ffffdd; 
    } 
} 

@mixin responsive-margin-value($prop) { 
    @media screen and (max-width: $mobile_threshold){  
     #{$prop} : 2px 
    } 

    @media screen and (min-width: $mobile_threshold + $threshold_step){ 
     #{$prop} : 20px 
    } 
} 


div { 
    margin: 50px; 

    border: solid 2px; 

    @include responsive-bg-color ("background-color"); 
    @include responsive-margin-value("padding-top"); 
} 

p { 
    @include responsive-margin-value("padding-bottom"); 

    background-color: #ddeedd; 
} 

這是有點有限，因爲你不能使用速記的CSS例如，但它的工作原理。