最简单的px转rem预处理方法

如果你使用 Stylus 作为你的预处理CSS的工具，那么 px2rem 是你使用最简单处理 px 转 rem 工具，stylus-px2rem 使用方法如此简单：

首先安装工具

npm install stylus-px2rem --save-dev

然后只要在你的index.styl 文件引用就可以里

@import "node_modules/stylus-px2rem"
div{ 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%
}

Stylus 工具将index.styl 编译成 index.css 并预处理将px转换成 rem 上面内容输出为：

div{
    margin:1.5rem 1.5rem;
    font-size:.875rem;
    padding-bottom:.75rem;
    width:6.25rem;
    height:6.25rem
}

选择使用和设置初始值

默认html-font-size＝10px 你可以设置它。你可以设置部分样式转化，部分样式不转换成rem，你只需这么引用 styl 即可。这种方法 mixins 必须引用它

@import 'stylus-px2rem/mixins'
@import 'stylus-px2rem/font-size'
@import 'stylus-px2rem/border'
@import 'stylus-px2rem/margin'
@import 'stylus-px2rem/padding'
@import 'stylus-px2rem/width'
@import 'stylus-px2rem/height'
@import 'stylus-px2rem/line-height'

html-font-size = 10px;

div {
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%
}

在Gulp中使用

在gulpfile.js中建立任务

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var px2rem = require('stylus-px2rem');
gulp.task('stylus',function(){
    gulp.src('./public/styl/*.styl')
        .pipe(stylus({
            use:[px2rem()],
            compress:true
        }))
        .pipe(gulp.dest('./public/css'));

})

在你的styl文件中引入

@import 'stylus-px2rem'
.banner{
    height 140px
    font-size 24px
}

在npm script 中使用

配置你的package.json文件

{
  "scripts": {
    "build:css": "stylus -u autoprefixer-stylus -u stylus-px2rem css/index.styl -o css/ -c",
    "watch:css": "stylus -u autoprefixer-stylus -u stylus-px2rem -w \"css/index.styl\" -o css/ -c "
  },
  "dependencies": {
    "autoprefixer-stylus": "^0.9.2",
    "stylus": "^0.54.2",
    "stylus-px2rem": "^1.0.4"
  }
}

运行命令

$ npm run build:css
$ npm run watch:css

关注公众号