基于 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;
}