当前位置: 首页 > Web前端 > HTML

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

时间:2023-04-02 17:21:08 HTML

1.lessform//定义一个变量和一个mixin(global)@fontSizeBase:75;//基于draft横屏尺寸/100的基准字体大小.px2rem(@name,@px){@{name}:@px/@fontSizeBase*1rem;}//用法示例:.fontsize{.px2rem(fontsize,750);}//less翻译结果:.fontsize{font-size:10rem;}2.Sassform//定义一个变量和一个mixin$fontSizeBase:75;//基于基准的视觉草稿横屏尺寸/100font-size@mixinpx2rem($name,$px){#{$name}:$px/$fontSizeBase*1rem;}//用法示例:.fontsize{@includepx2rem(height,750);}//Scss翻译结果:.fontsize{font-size:10rem;}三。Stylusform//定义一个变量和一个mixin$fontSizeBase:75;//basefont-size基于视觉草稿横屏尺寸/100px2rem(name,px){{name}:px/$baseFontSize*1雷姆;}//用法示例:.fontsize{px2rem('font-size',750);}//手写笔翻译结果:.fontsize{font-size:10rem;}