如何在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在他的博客文章中提出的问题。所以在你的例子中，mixins可以像这样:

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