【防衰老教程】-三种预处理器之px2rem转换

虽然rem这个单位，浏览器支持的还不是太好，但是手机端上基本时没问题，下面主要针对三种常见的css预处理器，做个px2rem使用方法总结：

一、sass预处理器

// 定义一个变量和一个mixin
$baseFontSize: 16; //默认基准font-size
@mixin px2rem($name, $px){
  #{$name}: $px / $baseFontSize * 1rem;
}

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

// scss翻译结果：
.container {
  height: 3.2rem;
}

二、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;
}
    

三、stylus预处理器

// 定义一个变量和一个mixin
$baseFontSize = 16; //默认基准font-size
px2rem(name, px){
{name}: px / $baseFontSize * 1rem;
}

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

// stylus翻译结果：
.container {
  height: 3.2rem;
}

四、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键，智能实时转换，是不是很酸爽：