vue下使用公用的scss

vue下使用公用的scss

效果如下

一、实现思路

本质上利用媒体查询，通过scss写通用模板，且使用灵活

二、相应操作

1.查找自身的版本

并去查找对应的sass-loader以及 node-sass的版本

注：我的vue-cli是 4.5.13 ，因此对应的版本分别为：“node-sass”: “^4.11.1”, “sass-loader”: “^7.3.0”

2.通用适配器的模板

采用 mixin混合的方式

// 搞一个断点列表 , 通过对象的方式
// 放在一个 scss文件里面，然后自动编译为 css即可
$breakpoints: ( 'phone': ( 320px, 480px, ), 'ipad': ( 481px, 768px, ), 'notebook': ( 769px, 1024px, ), 'desktop': ( 1025px, 1200px, ), 'tv': 1201px, );
// 适配各种平台
@mixin respon-to($breakname) {
    // 通过映射的方式，键取值
    $bp: map-get( $breakpoints, $breakname);
    // 判断是不是数组，也就是不是非大屏
    @if type-of($bp)=='list' {
        $min: nth($bp, 1);
        $max: nth( $bp, 2);
        @media (min-width: $min) and (max-width: $max) {
            // height: 30px; // 不要全部写死
            @content;
        }
    }
    @else {
        @media (min-width: $bp) {
            @content;
        }
    }
}

@mixin flexCenter($layout) {
    display: flex;
    justify-content: $layout;
    align-items: center;
}

3.在要使用的组件下导入

@import ‘…/styles/terminalAdapter.scss’; 注：要加上 ;

.media-body {
  width: 100%;
  // height: 30px;
  background-color: pink;
  @include flexCenter(center);
  @include respon-to('phone') {
    height: 50px; // 这里便可以将 {} 插入到上面的 @content内容里面
  }
  @include respon-to('ipad') {
    height: 55px;
  }
  @include respon-to('desktop') {
    height: 60px;
  }
  @include respon-to('tv') {
    height: 70px;
  }
}