小程序sass转wxss

wxss其实基本就是css, 而已习惯用sass写样式的我们,再一行一行,原始地敲css,是件很奇特的事。就像明知道可以发微信,但还要在邮局发电报一样…故要写小程序,环境必不可少的是将sass转为wxss。

思路

  1. 先生成正常的css, 再将css转为wxss格式
  2. 将px转为rpx

实现

  1. 可用gulp rename工具来将css直接重命名为wxss
    var rename = require('gulp-rename')
    ...pipe(rename(function (path) {
        path.extname = ".wxss";
    }))
  2. 可用gulp-px2rpx实现px单位自动转为rpx
    var px2rpx = require('gulp-px2rpx');
    ...pipe(px2rpx({
        screenWidth: 750, // 设计稿屏幕, 默认750
        wxappScreenWidth: 750, // 微信小程序屏幕, 默认750
        remPrecision: 6 // 小数精度, 默认6
    }))

Done, 就是这么简单…