Placement of media queries inside Sass/Scss - css

Question

I am currently working to make my website responsive. As I have to use media queries, I wonder which of these approaches are more common in the industry or which one would be better, easier to read/maintain in SCSS (the CSS values inside is just for demonstration).
Example 1 :
.foo {
width : 10px;
.bar {
width : 20px;
}
}
#media screen and (max-width : 20px) {
.foo {
width : 20px;
.bar {
width : 30px;
}
}
}
Example 2 :
.foo {
width : 10px;
#media screen and (max-width : 20px) {
width : 20px;
}
.bar {
width : 20px;
#media screen and (max-width : 20px) {
width : 30px;
}
}
}
Example 3 :
.foo {
width : 10px;
#media screen and (max-width : 20px) {
width : 20px;
.bar {
width : 30px;
}
}
.bar {
width : 20px;
}
}
I know that I could use mixins and functions instead of writing down the whole media query, I am more interested in placement of them.

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

Answer 2

#mixin min-max($resMin, $resMax) {
#media (min-width: $resMin+px) and (max-width: $resMax+px) {
#content;
}
}
#mixin max($res) {
#media (max-width: $res+px) {
#content;
}
}
#mixin min($res) {
#media (min-width: $res+px) {
#content;
}
}
.class-name {
#include min(1200){
width: 25%;
}
#include min-max(992,1199){
width: 50%;
}
#include max(991){
width: 100%;
}
}