Kann ich eine globale Variable mithilfe einer Medienabfrage festlegen?

Question

Ich habe einen Code Geruch, der wie folgt aussieht:

$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; 

    } 

} 

Und ich habe dies überall zu tun, wo Details könnten Unterschiede zwischen mobilen und Desktop sein.

Was würde ich wirklich tun möchte, ist:

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

Dies ist möglich, Sass mit?

Answer 1

Sie können dies mit einem mixin erreichen. Definieren Sie eine mixin wie so:

@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; 
    } 
} 

es dann rufen Sie wie folgt aus:

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

Sie können für jeden Satz von Regeln das gleiche tun Sie häufig verwenden. Mixins sorgen dafür, dass der Code DRY bleibt.

Answer 2

Erweitern auf jmargolisvt Antwort - Sie können auch den Namen einer Eigenschaft an die Mixin übergeben, und haben es zu lösen.

z.

@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; 
} 

Dies ist ein wenig begrenzt, da Sie nicht eine Abkürzung CSS beispielsweise nutzen können, aber es funktioniert.