Sass基礎——Rem與Px的轉換
rem是CSS3中新增加的一個單位值，他和em單位一樣，都是一個相對單位。不同的是em是相對於元素的父元素的font-size進行計算；rem是相對於根元素html的font-size進行計算。這樣一來rem就繞開了復雜的層級關系，實現了類似於em單位的功能。
Rem的使用
前面說了em是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值，這個參考值設置為多少，完全可以根據您自己的需求來定。
假設就使用瀏覽器默認的字號16px
px單位與rem之間的轉換關系：
| px | rem |
------------------------
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |
-------------------------
如果你要設置一個不同的值，那麽需要在根元素<html>中定義，為了方便計算，時常將在<html>元素中設置font-size值為62.5%:
html {
font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */
}相當於在<html>中設置font-size為10px，此時，上面示例中所示的值將會改變：
| px | rem |
-------------------------
| 12 | 12/10 = 1.2 |
| 14 | 14/10 = 1.4 |
| 16 | 16/10 = 1.6 |
| 18 | 18/10 = 1.8 |
| 20 | 20/10 = 2.0 |
| 24 | 24/10 = 2.4 |
| 30 | 30/10 = 3.0 |
| 36 | 36/10 = 3.6 |
| 42 | 42/10 = 4.2 |
| 48 | 48/10 = 4.8 |
-------------------------
由於rem是CSS3中的一個屬性，很多人首先關註的就是瀏覽器對他的支持度，我截了一張caniuse對rem屬性的兼容表：
從上圖可以清楚的知道，rem在眾多瀏覽器中都已得到很好的支持，如果您的項目不用考慮IE低版本的話，你就可以放心的使用了，如果您的項目在IE低版本中還占有不少的比例，那麽你還在擔心使用rem不能兼容，而不敢使用。其實是沒有必要的，可以針對低版本的IE瀏覽器做一定的處理：
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
這樣一來解決了IE低版本的不能兼容的問題，但生出另一個不足地方，就是增加了代碼量。必竟魚和熊掌很多時候不能兼得嘛。
如果你想更深入的了解rem如何使用，建議您閱讀：
- CSS3的REM設置字體大小——viaw3cplus
- FONT SIZING WITH REM——viaJonathan Snook
- There’s more to the CSS rem unit than font sizing——viacss-tricks
- In Defense Of Rem Units——viaMatthew Lettini
- Font sizing with rem could be avoided——viaHarry
- 響應式十日談第一日：使用 rem 設置文字大小——via一絲
為什麽要使用rem
像em單位一樣，在Responsive設計中使用rem單位非常有用。雖然他們都是相對單位，但使用rem單位可以避開很多層級的關系。因為em是相對於他的父元素的font-size，而rem是相對於根元素<html>。比如說h1設置了font-size為1rem之後，只要不重置html的font-size大小，無論他的父元素設置多大，對h1都不會有任何的影響。
Sass中rem的使用
在CSS中，實現px和rem轉換非常簡單，但每次使用都需進行計算。雖然在html中設置font-size:62.5%;會給大家帶來便利，但終究有些煩人，也不是長遠之計。既然我們學習了Sass，就應該思考如何讓Sass來幫助我們做這些計算的工作。接下來介紹如何使用Sass實現px和rem之間的計算。
rem在@function中的使用
Sass中也可以像使用em一樣，實現px轉換為rem。這個過程也同樣是通過Sass的@function方法來實現。
根據rem的使用原理，可以知道px轉rem需要在html根元素設置一個font-size值，因為rem是相對於html根元素。在Sass中定義一個px轉rem的函數，先要設置一個默認變量：
$browser-default-font-size: 16px !default;//變量的值可以根據自己需求定義
而且需要在html根元素中顯示的聲明font-size：
html {
font-size: $browser-default-font-size;
}然後通過@function來實現px轉為rem計算：
@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; }
不過定義的這個函數pxTorem()雖然實現了px轉換成rem的計算，但不能同時服務於多個屬性值的計算：
.header {
font-size: pxTorem(12px);
margin: pxTorem(5px 10px);//同時計算多個值將報錯
}如果這樣使用，編譯的時候將會報錯：
>>> Change detected to: /Users/airen/Sites/testSass/style.scss
error style.scss (Line 4: Undefined operation: "5px 10px/16px times 1rem".)
這也就是說，如果樣式同時需要設置多個屬性值的時候，pxTorem()變得就局限性太大，換句話說，這個函數僅適合運用在具有單個屬性值的屬性上，例如font-size。如果要強行使用，只能同時使用多個pxTorem()：
//SCSS
.header {
font-size: pxTorem(12px);
margin: pxTorem(5px) pxTorem(10px) pxTorem(15px);
border: pxTorem(1px) solid #f36;
}
//CSS
.header {
font-size: 0.75rem;
margin: 0.3125rem 0.625rem 0.9375rem;
border: 0.0625rem solid #ff3366; }
Sass中mixin實現rem
除了使用@function實現px轉換成rem之外，還可以使用Sass中的mixin實現px轉rem功能。
font-size是樣式中常見的屬性之一，我們先來看一個簡單mixin，用來實現font-size的px轉rem：
@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...表示一個或者多個屬性值。
註：在上面定義的remCalc中使用了下自定義的函數strip-units，主要用來去除單位，詳細的請參閱Sass基礎——PX to EM Mixin和@function一文中的strip-units函數定義方法。
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值。
總結
在這篇文章中，簡單介紹了在Sass中如何定義@function和@mixin來實現px轉換成rem的計算。希望大家能在這篇文章中找到自己需要的靈感。
如需轉載，煩請註明出處：http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html
著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html © w3cplus.com
Sass基礎——Rem與Px的轉換