使用 SASS 混合器 和@media 适应分辨率变化

SASS安装使用过程略过。。。

具体可以参考：SASS开发环境搭建（webstorm做编辑器）_ClassicSong的博客-CSDN博客_sas 环境搭建

在使用@media  screen适应分辨率变化，对各组件的都需要重复写css ，已适应不同分辨率该使用什么尺寸。

这种情况下CSS代码不好管理，且不好编辑。

使用SASS的混合器，把每一个分辨率的变化的CSS封装成方法，每一个不同的尺寸以传参的形式，进行编写。

节省代码的同时，更方便去管理每一个CSS的尺寸变化。

例子

代码：

@charset "UTF-8";

//背景颜色
$all-bgColor:#5b9bd5;

//封装方法(传入4个参数，方法必须写前面)
@mixin allSize-PX($oneBtn-width,$oneBtn-height,$font-size,$date-width) {
  /*中间按钮*/
  .oneBtn{
    margin: 0 auto;
    width: $oneBtn-width;
    height: $oneBtn-height;
  }
  /*时间选择*/
  .date {
    border: none;
    width: $date-width;
    height: 30px;
    background-color: $all-bgColor;
    padding-top: 2px;
    font-size: $font-size;
  }
}

/* css注释：设置了浏览器宽度不小于1401px时 abc 显示1200px宽度 */
@media screen and (min-width: 1401px) {
  @include allSize-PX(
          $oneBtn-width:250px,
          $oneBtn-height:100px,
          $font-size:18px,
          $date-width:110px
  );
}

/* 设置了浏览器宽度不大于1400px时 */
@media screen and (max-width: 1400px) {
  @include allSize-PX(
          $oneBtn-width:220px,
          $oneBtn-height:80px,
          $font-size:16px,
          $date-width:100px
  );
}

@media screen and (max-width: 1200px){
  @include allSize-PX(
          $oneBtn-width:190px,
          $oneBtn-height:70px,
          $font-size:15px,
          $date-width:90px
  );
}

/* 设置了浏览器宽度不大于900px时 abc 显示900px宽度 */
@media screen and (max-width: 900px){
  @include allSize-PX(
          $oneBtn-width:170px,
          $oneBtn-height:65px,
          $font-size:14px,
          $date-width:80px
  );
}

传入的参数也可以 弄成全局变量，同样可以进行加减乘除，具体算法规则可以参考

https://www.sasscss.com/getting-started/#5

注：调用CSS文件，不能调用SCSS文件。