【防衰老教程】-三種預處理器之px2rem轉換

雖然rem這個單位，瀏覽器支持的還不是太好，可是手機端上基本時沒問題，下面主要針對三種常見的css預處理器，作個px2rem使用方法總結：

1、sass預處理器

// 定義一個變量和一個mixin
$baseFontSize: 16; //默認基準font-size
@mixin px2rem($name, $px){
  #{$name}: $px / $baseFontSize * 1rem;
}

// 使用示例：
.container {
  @include px2rem(height, 240);
}

// scss翻譯結果：
.container {
  height: 3.2rem;
}

2、less預處理器

// 定義一個變量, 注：移動端基於視覺稿橫屏尺寸/100得出基準font-size
@baseFontSize: 16;
// rem轉換函數
.px2rem(@name, @px) {
    @{name}: @px / @baseFontSize * 1rem;
}

// 使用示例
.container {
    .px2rem(font-size, 14);
}

// less翻譯結果
.container {
    font-size: 0.85rem;
}

3、stylus預處理器

// 定義一個變量和一個mixin
$baseFontSize = 16; //默認基準font-size
px2rem(name, px){
{name}: px / $baseFontSize * 1rem;
}

// 使用示例：
.container {
  px2rem('height', 240);
}

// stylus翻譯結果：
.container {
  height: 3.2rem;
}

4、cssrem插件

最後若是，你是用Sublime Text3的同窗，有福了，插件奉上cssrem

下面小主介紹一下如何配置：

2.1 咱們能夠在GitHub上下載所依賴的文件；

2.2 打開Sublime Text，進入packages目錄（Sublime Text -> Preferences -> Browse Packages）；

2.3 將cssrem-master文件夾放在上一步打開的目錄中，重啓sublime text便可生效；

2.4 咱們也能夠修改默認配置：
打開cssrem-master文件夾下的cssrem.sublime-settings文件，進行修改

{
    "px_to_rem": 40, //px轉rem的單位比例，默認爲40
    "max_rem_fraction_length": 6, //px轉rem的小數部分的最大長度。默認爲6。
    "available_file_types": [".css", ".less", ".sass",".html"]
    //啓用此插件的文件類型。默認爲：[".css", ".less", ".sass"]
}

2.5 使用方法：

使用時只需按tab鍵，智能實時轉換，是否是很酸爽：