快速将px转换成rem的方法


1.sass转化

 1.0将样式.css文件的px批量处理转换成pxTorem(**px)的形式,

快速转换的正则表达式为:([ :\(]{1})(-?\d{1,4})px,$1pxTorem($2px);

 

 1.1根据rem的使用原理,可以知道pxrem需要在html根元素设置一个font-size值,因为rem是相对于html根元素。在Sass中定义一个pxrem的函数,先要设置一个默认变量:

px转rem $browser-default-font-size: 12px !default;
@function pxTorem($px){
@return $px / $browser-default-font-size * 1rem;
}

 1.2编译

编译指令:sass --watch --style compact sass/:css/

2.给Sublime Text 2添加插件-rem-px,如果你想要转换成除以12的话,则需要在rem-px包中修改REM-PX.sublime-settings里面的文件内容。将里面的数字改掉即可。在sublime中快速将所以px搜索的正则方式是\d+px,,在编辑器里选择find all 否则无效。然后输入快捷键ctrl+shift+r即可


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM