使用Mixin

在Sass初识一篇中介绍了如何在Sass中使用Media Queries:

#pagewrap {
    @media (max-width:800px) {
        background:red;
    }
    @media (max-width:500px) {
        background:green;
    }
}


这样写完之后，还是感觉比较麻烦，因为每次都要写@media (...)，我们可以写一个Mixin。

自定义Media Queries的Mixin

@mixin screen($sWidth) {
    @if $sWidth == big {
        @media (max-width: 1000px) { @content; }
    }
    @else if $sWidth == middle {
        @media (max-width: 800px) { @content; }
    }
    @else if $sWidth == small {
        @media (max-width: 500px)  { @content; }
    }
}

用的时候只需要这样：

#pagewrap {
        @include screen(big) { background:white; }
        @include screen(middle) { background:red; }
        @include screen(small) { background:green; }
}