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