分享一下Sass处理的更高级媒体查询

普通css中使用@media 去处理响应式网站开发估计大部分人都遇到过，但是在css预处理如此流行的今天，我们应该学会更敏捷的开发模式，更好的让他们发挥最大的效率。响应式开发大同小异但是具体处理方案还是很多的，这里我分享一个比较规范，用起来也比较舒服的scss处理的媒体查询方案。

具体方案大概是这样：

先定义一些断点（也就是我们要界别的设备尺寸）

// _config.scss
$breakpoints: (
  'xs': 'only screen and ( min-width: 480px)',
  'sm': 'only screen and ( min-width: 768px)',
  'md': 'only screen and ( min-width: 992px)',
  'lg': 'only screen and ( min-width: 1200px)',
) !default;复制代码

然后定义mixin:

// _mixins.scss
@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);
  // 这里是scss error提示估计大部分人（包括我）都没怎么使用过
  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is 
    defined in `$breakpoints` map.';
  }
   // 具体断点解释在这里，作者比较严谨，校验了$query合法性
  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))}
   {
    @content;
  }
}复制代码

这里解释一些出现的一些scss函数

字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：

unquote($query)：删除字符串中的引号；
quote($query)：给字符串添加引号。
inspect($query) Maps不能转换为纯CSS。作为变量的值或参数传递给CSS函数将会导致错误。
                使用inspect($query) 函数以产生输出字符串复制代码

使用的时候这样写：

// _component.scss
.element {
  color: #000;

  @include respond-to(sm) {
    color: #333;
  }
}复制代码

最后编译完成输出结构是

.element {
  color: #000;
}

@media (min-width: 768px) {
  .element {
    color: #333;
  }
}复制代码

这样当需求更改，导致媒体查询数值变化的时候，我们只需要改$breakpoints中的值，而不必查找、替换。并且使用@include可以使我们的代码维护容易。

那么如果我需要定义移动端retina屏幕使用二倍的背景图，需要怎么做？

新增加一个断点，然后使用即可。

$breakpoints: (
  ...
  'xs-retina'  : ( max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
);复制代码

这时候就出现小问题了，如果页面很复杂，需要新增很多断点，那么可能会出现组合爆炸，造成$brekpoints的子项很多很多，除了会影响sass编译速度之外，维护起来也会更加麻烦。

Sass媒体查询应该是这样

• 动态，可定义，可以随意增加断点

• 简洁，自然的语法，可以使用 <=,>=, >,< 符号（←_←）比如 @include media(">minWidth")

• 可以自由组合，临时定义断点，可以组合多个断点，也可以临时自定义断点，比如 @include media(">tablet", "<1280px")

如果你觉得感兴趣，可以尝试下Eduardo Bouças和Hugo Giraudel的开源作品@include-media

原文地址： www.v5ant.com/details/PYQ…

:clap:欢迎其他同学分享你们项目中的响应式方案。