前端开发攻略---简化响应式设计：利用 SCSS 优雅管理媒体查询

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介绍

Sass（Syntactically Awesome Stylesheets）是一种强大的CSS预处理器，它为CSS提供了许多增强功能，使得样式表的编写更加简洁和灵活。通过 Sass，您可以使用变量、嵌套规则、混合器、继承等功能，使得样式表的维护和管理更加容易。

其中，最常用的功能之一是变量。使用 Sass，您可以定义一次变量，然后在整个样式表中多次使用，这样可以方便地在需要时进行修改，而无需逐个查找和替换。

另一个重要的功能是嵌套规则。通过 Sass，您可以编写更加结构清晰的样式表，使用嵌套规则可以更好地组织和管理样式，提高代码的可读性和维护性。

此外，Sass还支持混合器（Mixins）和继承（Inheritance）等功能，这些功能可以帮助您减少样式表的重复代码，提高样式表的复用性和可维护性。

总的来说，Sass是一个强大的工具，可以帮助您更高效地编写和管理样式表，提高前端开发的效率和质量。

5、混合器

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

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

@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;
}

6、传递参数

 编译前的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;
}

7、传递内容

 编译前的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;
}

8、优化后的代码

 
$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文件内容和第二步一模一样，而且上面这个代码只需要做一次，不需要每次都写，项目里面做一次甚至可以跨越项目，后边要做的无非就是使用这个混合