SCSS实现响应式布局

时间：2021-02-20 10:13:30

参考文章

代码演示

  • alpha1.0 当要完成响应式布局时，纯手写方法一般是如下，缺点是，如果要修改断点，或者修改属性值的时候，全部要手动修改，如果代码是比较杂乱的会显得，并不够优秀。所以，就有了第一种用scss实现的方式。
 @media screen and (min-width: 480px) {
    p {font-size:26px;}
    h1 {font-size:40px;}
 }
 @media screen and (min-width: 320px) {
    p {font-size:18px;}
    h1 {font-size:30px;}
 }

这种方式给所需要的断点对应的值组织一个list，通过@each遍历，很容易就完成简单的响应式布局

$h1List:(
  'null' : 10px,
  '480px': 20px,
  '728px': 30px,
  '1200px': 40px,
);
$pList:(
  'null' : 15px,
  '480px': 16px,
  '728px': 17px,
  '1200px': 18px,
);

@mixin fontSize1($list){
  @each $point, $size in $list {
    //设置一个默认的值
    @if $point == "null"{
      font-size : $size;
    }@else{
      @media screen and (min-width : $point){
        font-size : $size;
      }
    }
  }
}

p{
  @include fontSize1($pList)
}
h1{
  @include fontSize1($h1List);
}
  • alpha2.0 以上代码的不足是，如果要大量修改断点的话，需要手动修改每一个list的断点值，所以在下一步中，就把这些断点值组合成了一个list
$breakpoint : (
  'small' : 480px,
  'middle' : 728px,
  'large' : 1200px
);
$h1List:(
  'null' : 10px,
  'small': 20px,
  'middle': 30px,
  'large': 40px,
);
$pList:(
  'null' : 15px,
  'small': 26px,
  'middle': 17px,
  'large': 18px,
);
@mixin fontSize2($list,$points:$breakpoint ){
  //这里可能有点绕，就是首先获得list中的font-size和对应的断点值$point-null/small...
  @each $point, $size in $list {
    @if $point == "null"{
      font-size : $size;
    }@else{
     //map函数 传入刚才获得的断点，如果刚才的断点point存在于断点list中，则对$point重新赋值为断点list中的实际值
     @if map-has_key($points,$point){
       $point : map_get($points,$point);
     }
    @media screen and (min-width : $point){
        font-size : $size;
      }
    }
  }
}
p{
  @include fontSize2($pList)
}
h1{
  @include fontSize2($h1List);
}
  • alpha3.0，是对响应式的一个扩展，当某几个属性是相互联系的，存在于每一个标签的响应式实现中，就可以对设定的属性list进行扩展，我反正说不清楚了，看代码吧。以下代码，扩展的是line-height属性
$breakpoint : (
  'small' : 480px,
  'middle' : 728px,
  'large' : 1200px
);
$h1List:(
  'null' : (10px,1),
  'small': (20px,1.2),
  'middle': (30px,1.5),
  'large': (40px,2),
);
$pList:(
  'null' : (15px,1),
  'small': (26px,1.2),
  'middle': (17px,1.5),
  'large': (18px,2.0)
);
@mixin get-font-size($font-size){
  //接受传入的list参数，把list进行拆分，分别给属性赋值
  @if type-of($font-size) == 'list'{
    font-size: nth($font-size,1);
    @if (length($font-size) > 1){
      line-height: nth($font-size,2);
    }
    //@if (length($font-size) > 2){
    // ...
    //}
  }@else{
    font-size : $font-size;
  }
}
@mixin fontSize3($list,$points:$breakpoint ){
  @each $point, $size in $list {
    @if $point == "null"{
      //把对属性赋值改成调用一个@mixin
      @include get-font-size($size);
    }@else{
     @if map-has_key($points,$point){
       $point : map_get($points,$point);
     }
    @media screen and (min-width : $point){
        @include get-font-size($size);
      }
    }
  }
}
p{
  @include fontSize3($pList)
}
h1{
  @include fontSize3($h1List);
}

总结

  • 以上的代码都是跟着w3cplus的大漠老师的文章敲得。w3cplus上学习sass是我目前发现国内最好的地方了。
  • 然后即使是3.0也有很多不足的地方，大漠老师文章说的很清楚，我认为css也可以自己纯手写，所以遇到问题的时候，再去思考scss的解决方式，查看文章，了解更多的内置函数的使用方式，这样就很好了。
标签：

相关文章