如何在SASS中添加更好的響應式查詢？

Question

什麼是更好的SASS方式來編寫下面的代碼。最後，我寫了大量的帶有維度的媒體查詢，並且在SASS中重複類 - 肯定有一種很好的方式來使用mixins或包含？其他人寫的媒體查詢比下面更好？

$strFullWidth:100%; 

.aboutWrapper { 
    .logo{width:$strFullWidth;max-width:620px} 
} 

// MOBILE 
@media only screen and (max-width:850px){ 
    .aboutWrapper { 
     .logo{width:$strFullWidth;max-width:420px} 
    } 
} 

// SMALL MOBILE 
@media only screen and (max-width:550px){ 
    .aboutWrapper { 
     .logo{width:$strFullWidth;max-width:320px} 
    } 
} 

Answer 1

我喜歡查詢David Walsh proposes in his blog post。所以你的情況的混入可能看起來像：

@mixin mobile { 
    @media only screen and (max-width:850px) { 
    @content; 
    } 
} 

@mixin smallMobile { 
    @media only screen and (max-width:550px) { 
    @content; 
    } 
} 

有了這些混合工序，您SCSS代碼歸結爲：

$strFullWidth:100%; 
.aboutWrapper { 
    .logo { 
     width:$strFullWidth; 
     max-width:620px; 
    } 
} 

@include mobile { 
    .aboutWrapper .logo { max-width:420px; } 
} 
@include smallMobile { 
    .aboutWrapper .logo { max-width:320px; } 
}