在Sass/Scss中放置媒體查詢

Question

我目前正在努力使我的網站響應。由於我必須使用媒體查詢，我不知道哪種方法在行業中更常見，哪些方法會更好，更容易在SCSS中讀取/維護（CSS中的值僅用於演示）。

例1：

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

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

例2：

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

例3：

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

我知道，我可以使用混合類型和函數，而不是寫下來的全媒體查詢，我更感興趣的放置它們。

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