Platzierung von Medienabfragen innerhalb von Sass/Scss

Question

Ich arbeite gerade daran, meine Website reaktionsfähig zu machen. Da ich Medienabfragen verwenden muss, frage ich mich, welche dieser Ansätze in der Branche häufiger sind oder welche besser, einfacher zu lesen/zu warten in SCSS (die CSS-Werte im Inneren ist nur zur Demonstration).

Beispiel 1:

.foo { 
    width : 10px; 
    .bar { 
    width : 20px; 
    } 
} 

@media screen and (max-width : 20px) { 
    .foo { 
    width : 20px; 
    .bar { 
     width : 30px; 
    } 
    } 
} 

Beispiel 2:

.foo { 
    width : 10px; 
    @media screen and (max-width : 20px) { 
     width : 20px; 
    } 
    .bar { 
    width : 20px; 
    @media screen and (max-width : 20px) { 
     width : 30px; 
    } 
    } 
} 

Beispiel 3:

.foo { 
    width : 10px; 
    @media screen and (max-width : 20px) { 
     width : 20px; 
     .bar { 
     width : 30px; 
     } 
    } 
    .bar { 
    width : 20px; 
    } 
} 

Ich weiß, dass ich Mixins und Funktionen statt Aufschreiben der ganzen Medien nutzen könnte Frage, ich bin mehr daran interessiert, sie zu platzieren.

Answer 1

A better option would be to create sass mixin for media query and use it 
e.g. 
bp = Break point 
@mixin bp-devices { 
    @media (min-width: 767px) { 
     @content; 
    } 
} 

and use it as 
footer { 
    padding: 25px 0 14px; 

    @include bp-devices { padding-bottom: 45px; } 
}