@media x @mixin x @content

说到媒体查询我想到的就是麻烦，要写很多代码，而且难懂。当 Sass 推出了 @mixin 和 @content 后一切就感觉很舒服了。

例子

我们从一个例子说起。比如我们想在宽度不同时候去变化背景色。

• 0px ~ 500px 绿色
• 501px ~ 1024px 红色
• 1025 以上都是蓝色

使用 CSS 的媒体查询会写成这样：

@media (max-width: 500px) {
    .container {
        background: green;
    }
}
@media (min-width: 501px) and (max-width: 1024px) {
    .container {
        background: red;
    }
}
@media (min-width: 1025px) {
    .container {
        background: blue;
    }
}

要是代码多起来完全不知道这个 max-width: 500px 是个什么鬼。

Sass 重写

Sass 提供了 @mixin 语法，其本质上和函数差不多，可以理解成返回的东西是 CSS 代码（当然 Sass 也有函数 @function 一说，这里不过是做一下类比）。如下面就是将 background: $bgColor 代码写到 .container 里。

@mixin setBackgroundColor($bgColor) {
    background: $bgColor
}

.container {
    $bgColor: 'blue';
    @include setBackgroundColor($bgColor)
}

Sass 同时还引进了 @content，这就让媒体查询变得更容易理解了。上面的代码可以写成这样：

@mixin phone {
  @media (max-width: 500px) {
    @content;
  }
}

@mixin ipad {
  @media (min-width: 501px) and (max-width: 1024px) {
    @content;
  }
}

@mixin pc {
  @media (min-width: 1025px) {
    @content;
  }
}

body {
  @include phone {
    background: green;
  }
  @include ipad {
    background: red;
  }
  @include pc {
    background: blue;
  }
}

@content 就像是变量，这个变量表示了 @include 花括号里的代码。这样就可以不用每个 @media 里都写一遍 CSS 代码了，直接在 CSS 代码里 @include 对应的 Mixin 就好了。而且易读性很高，这样的代码傻子都能看懂，phone 是 xxx 样式，ipad 是 yyy 样式，pc 是 zzz 样式，一目了然。