美文网首页
[Sass]进行手机端适配

[Sass]进行手机端适配

作者: 泉落云生 | 来源:发表于2018-07-10 15:29 被阅读110次
    @mixin remCalc($property, $values...) {
      $max: length($values);//返回$values列表的长度值
      $pxValues: '';
      $remValues: '';
    
      @for $i from 1 through $max {
        $value: strip-units(nth($values, $i));//返回$values列表中的第$i个值,并将单位值去掉
        $browser-default-font-size: strip-units($browser-default-font-size);
        $pxValues: #{$pxValues + $value * $browser-default-font-size}px;
    
        @if $i < $max {
          $pxValues: #{$pxValues + " "};
        }
      } 
    
      @for $i from 1 through $max {
        $value: strip-units(nth($values, $i));
        $remValues: #{$remValues + $value}rem;
    
        @if $i < $max {
          $remValues: #{$remValues + " "};
        }
      } 
    
      #{$property}: $pxValues; 
      #{$property}: $remValues; 
    }
    
    //使用时SCSS
    .wrapper {
        @include remCalc(width,45);
        @include remCalc(margin,1,.5,2,3);
    }
    
    //生成的CSS
    .wrapper {
      width: 720px;
      width: 45rem;
      margin: 16px 8px 32px 48px;
      margin: 1rem 0.5rem 2rem 3rem; }
    

    相关文章

      网友评论

          本文标题:[Sass]进行手机端适配

          本文链接:https://www.haomeiwen.com/subject/mfzfpftx.html