前言

前两天摸鱼时无意间刷到了一篇用sass去简化媒体查询的做法，刚好我也正在做移动端适配，就尝试着做了一下，感觉非常不错。分享一下😁～～

正文

相信大家一定都用过媒体查询，比如像这种设置页面在不同尺寸屏幕下的样式:

....
@media screen and (min-width: 1680px) {}
@media screen and (min-width: 1200px) and (max-width: 1680px) {}
@media screen and (min-width: 700px) and (max-width: 1200px) { }
@media screen and (max-width: 700px){}
....

每种尺寸下都会去重新写一次样式，看起来很冗余，而sass出现就大大简化了写法，简直就是事半功倍😄😄~~~

下面是sass写法，如果不熟悉的话先去官网瞅瞅，先上代码

$screen: (
  'large': 1680px,
  'medium': (1200px,1680px),
  'small': (700px,1200px,),
  'xs': 700px,
);
@mixin media($size) {
  $bp: map-get($screen, $size);
  @if type-of($bp) == 'list' {
    $min: nth($bp, 1);
    $max: nth($bp, 2);
    @media screen and (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else {
    @if $size== 'large' {
      @media screen and (min-width: $bp) {
       @content;
      }
    } @else {
    @media screen and (max-width: $bp) {
       @content;
    }
    }
  }
}
//使用
.test{
    @include media('large') {
      height: 50px;
      .xxx{}
    }
     @include media('medium') {
      height: 40px;
      .xxx{}
    }
}

讲解

首先是定义了@mixin混合指令，可以看到有一个@conent,这个东西其实就相当于vue的插槽,会替换为@include {这里的样式}, $scree类似于js的Map数据结构，存放的是[键，值]，而map-get($ map, $key) 函数的作用是根据$ key 参数，返回 $key 在$ map 中对应的 value 值。如果 $key 不存在$ map中，将返回 null。对此我们可以通过 type-of去判断返回值value的类型。返回类型有以下几种：

number 为数值型
string 为字符串型
bool 为布尔型
color 为颜色型
map 新的map结构(a:1px,b:2px)
list 数组（1px,2px）

此处我们只需要判断list类型即可,数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能, nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；而 @each 指令能够遍历数组中的每一项。

自此，改造基本完成✅

你不知道的媒体查询优化

前言

正文

讲解