1、演示

2、未优化前的代码

.header {
  width: 100px;
  height: 100px;
  background-color: red;
}
@media (min-width: 320px) and (max-width: 480px) {
  .header {
    width: 10px;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .header {
    height: 20px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .header {
    height: 40px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    height: 60px;
  }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .header {
    height: 80px;
  }
}
@media (min-width: 1201px) {
  .header {
    height: 100px;
  }
}

可以想象一下，在真实的项目里面有这么多选择器要写，有这么多根据不同的设备处理不同的样式，这个代码根本看不了。

3、优化方法

 想办法优化成容易书写，容易维护，可以借助预编译器 Sass 或者 less

4、Sass中的混合 

什么叫做混合： 可以提取一部分的公共代码

未编译前的代码，可以公共使用

@mixin flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.header{
  width: 100%;
  @include flex;
}
.nav{
  @include flex;
}

编译后的代码，会被编译为存粹的Css，最终的运行结果也是这个存粹的Css

.header{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav{
  display: flex;
  justify-content: center;
  align-items: center;
}

5、传递参数

 编译前的scss文件

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

.header{
  width: 100%;
  @include flex(center)
}
.nav{
  @include flex(start)
}

编译后的css文件

.header{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav{
  display: flex;
  justify-content: start;
  align-items: start;
}

6、传递内容

 编译前的scss文件

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

.header{
  width: 100%;
  @include flex(center){
    background-color: red;
  }
}
.nav{
  @include flex(start){
    position: relative;
  }
}

 编译前的css文件

.header{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}
.nav{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

7、优化后的代码

$typePoint:(
  'phone':(320px,480px),
  'pad':(481px,768px),  
  'notebook':(769px,1024px),
  'desktop':(1025px,1200px),
  'tv':1201px,
);

@mixin responseTo($type){
    $bp:map-get($typePoint,$type);
    @if type-of($bp) == 'list' {
        @media (min-width: nth($bp,1)) and (max-width: nth($bp,2)) {
            @content;
        }
    } @else {
        @media (min-width: $bp)  {
            @content;
        }
    }
}

.header{
    width: 100%;
    @include responseTo('phone'){
        height: 50px;
    }
    @include responseTo('pad'){
        height: 70px;
    }
    @include responseTo('notebook'){
        height: 90px;
    }
    @include responseTo('desktop'){
        height: 110px;
    }
    @include responseTo('tv'){
        height: 130px;
    }

}

写完保存过后，生成的css文件内容和第二步一模一样，而且上面这个代码只需要做一次，不需要每次都写，项目里面做一次甚至可以跨越项目，后边要做的无非就是使用这个混合