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