一. 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;
}