基于 less,sass,stylus三种预处理rem

一. less形式

//定义一个变量和一个mixin（全局）
@fontSizeBase: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
@{name}: @px / @fontSizeBase * 1rem;
}
//使用示例：
.fontsize {
.px2rem(fontsize, 750);
}
//less翻译结果：
.fontsize {
font-size: 10rem;
}

二. sass形式

//定义一个变量和一个mixin
$fontSizeBase: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
@mixin px2rem($name, $px){
#{$name}: $px / $fontSizeBase * 1rem;
}

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

//scss翻译结果：
.fontsize {
font-size: 10rem;
}

三. stylus形式

//定义一个变量和一个mixin
$fontSizeBase: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
px2rem(name, px){
{name}: px / $baseFontSize * 1rem;
}

//使用示例：
.fontsize {
px2rem(‘font-size’, 750);
}

//stylus翻译结果：
.fontsize {
font-size: 10rem;
}