如何利用scss做适配方案，优化代码

场景：一般写适配都会用到媒体查询，但是每套媒体查询都要去写很多重复代码，所以利用scss的混合模式来实现优化代码

scss的混合模式也算是高阶方法了，用的顺手，确实非常方便的优化代码

1.先来个开胃菜

// 1.弹性横向水平垂直居中
@mixin flexHorizontalCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 2.弹性纵向水平垂直居中
@mixin flexDirectionCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box{
        //display: flex;
        //justify-content: center;
        //align-items: center;
        // ===混合样式代替
         @include flexHorizontalCenter;
}

//最后编译完成就是弹性布局的，一下子就省略了很多代码，

2.小试牛刀

// 假如需要传参，比如不居中，
@mixin flexHorizontal($layout) {
    display: flex;
    align-items: center;
    justify-content: $layout;
}
.box{
         //这里就传入值即可
         @include flexHorizontal(start);
}

3.尝试上手

/*
    利用scss中混合模式来方便适配代码
*/
// 断点适配：
$breakPoints: (
    'phone':(320px, 480px),
    'pad':(481px, 768px),
    'noteBook':(769px, 1024px),
    'desktop':(1025px, 1280px),
    'tv':1281px
);

// 适配混合模式,breakname是传入的端名
@mixin respond-to($breakname) {
    // 解析map-get：变量$bp获取到breakPoints对象中设备名称是breakname的数据,ex:传入phone，得到（(320px, 480px)）
    $bp: map-get($breakPoints, $breakname);

    // 解析type-of：判断类型,list是数组,nth()：取出变量bp中第一个，第二值
    @if type-of($bp )=='list' {
        $min: nth($bp, 1);
        $max: nth($bp, 2);

        // 直接赋值，然后渲染
        @media (min-width:$min) and (max-width:$max) {
            @content;
        }
    }

    @else {
        @media (min-width: $bp) {
            @content;
        }
    }
}

// 使用
@include respond-to('tv') {
  border: 1px solid red;
}
@include respond-to('phone') {
  border: 1px solid yellow;
}