05-Scss-媒体查询与Mixin的配合使用

在编写响应式开发的过程中，常常使用媒体查询：

.header {
    width: 1000px;
}

@media screen and (min-width: 768px) {
    .header {
        width: 500px;
    }
}

而对于多条媒体查询，这种写法显得重复率较高，而合并的写法又不利于代码的阅读，因此可以通过结合 mixin 混入的方法实现媒体查询。

@mixin ipad {
    @media screen and (min-width: 768px) {
        @content;
    }
}

其中，@content 指明了使用mixin处传过来的代码块，使用方法如下：

.header {
    width: 1000px;
    @include ipad {
        width: 500px;
    }
}

width: 500px; 即实现了对 @content 的替换

同样地，根据之前的知识，mixin 可以接收参数，例如可以通过 $height 接收传过来的高度值，再赋值给内部属性。
完整代码如下：
main.scss

@mixin ipad($height) {
    @media screen and (min-width: 768px) {
        height: $height;
        @content;
    }
}

.header {
    width: 1000px;
    @include ipad(100px) {
        width: 500px;
    }
}

.footer {
    color: blue;
    @include ipad(200px) {
        color: red;
    }
}

编译后 css 代码如下：

.header {
  width: 1000px;
}
@media screen and (min-width: 768px) {
  .header {
    height: 100px;
    width: 500px;
  }
}

.footer {
  color: blue;
}
@media screen and (min-width: 768px) {
  .footer {
    height: 200px;
    color: red;
  }
}/*# sourceMappingURL=main.css.map */

— END —