Sass/Scss基础——rem与px的自动转换

Sass/Scss中rem的使用

在CSS中，实现px和rem转换非常简单，但每次使用都需进行计算。虽然在html中设置font-size:62.5%即16px*62.5%=10px;会给大家带来便利，但终究有些烦人，也不是长远之计。另外，Google浏览器中文默认字体大小为12px。既然我们学习了Sass，就应该思考如何让Sass来帮助我们做这些计算的工作。接下来介绍如何使用Sass实现px和rem之间的计算。

根据rem的使用原理，可以知道px转rem需要在html根元素设置一个font-size值，因为rem是相对于html根元素。

方法一、Sass中@function中rem转px

$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义

html {
    font-size: $browser-default-font-size;
}

@function pxTorem($px){//$px为需要转换的字号
    @return $px / $browser-default-font-size * 1rem;
}

定义好@function之后，实际使用中就简单多了：

//SCSS
html {
    font-size: $browser-default-font-size;
}
.header {
    font-size: pxTorem(12px);
}

//CSS
html {
  font-size: 16px; }

.header {
  font-size: 0.75rem; }

方法二、Sass中mixin实现rem转px

$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义

html {
    font-size: $browser-default-font-size;
}
@mixin font-size($target){
    font-size: $target;
    font-size: ($target / $browser-default-font-size) * 1rem;
}

在实际使用中，可以通过@include调用定义好的@mixin font-size:

//SCSS
.footer {
    @include font-size(12px);
}

//CSS
.footer {
  font-size: 12px;
  font-size: 0.75rem; }

可实际中，这个mixin太弱小了，根本无法实现我们需要的效果，因为我们很多样式属性中他可不只一个属性。为了实现多个属性能设置多值，就需要对mixin做出功能扩展：

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

在这个remCalc()中定义了两个参数$property和$values…。其中$property表示的是样式属性，而$values…表示一个或者多个属性值。

px转rem的mixin定义完成后，就可以通过@include来引用：

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

在实际使用中取值有一点非常重要在remCalc()取的$values值为rem值。