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值。