less-rem

/less/demo.less

@import "./rem";
.demo {
    width:rem(750);
    height:rem(114);
    box-shadow: rem(13) rem(25) rem(37.62) pink;
    background: #eee;
}

/dist/demo.css

.demo {
  width: 20rem;
  height: 3.125rem;
  box-shadow: 0.34375rem 0.6875rem 1.03125rem pink;
  background: #eee;
}

less-plugin-functions

/less/rem.less

// 关键需要 less-plugin-functions 来给 less 提供自定义函数支持
// You need less-plugin-functions  https://www.npmjs.com/package/less-plugin-functions
.function {
    .rem(@size) {
        // 750 是设计稿宽度
        // 750 is psd width
        return: @size./(750/320*16)+0rem;
    }
}

view demo

http://2type.github.io/rem/index.html

gulpfile.js

var gulp = require('gulp')
var less = require('gulp-less')
var LessPluginFunctions = require('less-plugin-functions')
gulp.task('less', function () {
    gulp.src('less/**.less')
        .pipe(less({
            // less-plugin-functions is Important
            // less-plugin-functions 为 less 提供自定义函数功能
            plugins: [
                new LessPluginFunctions()
            ]
        }))
        .pipe(gulp.dest('dist/css'))
});

package.json

"dependencies": {
  "gulp": "^3.9.1",
  "gulp-less": "^3.1.0",
  "less-plugin-functions": "0.0.2"
}

local test | 本地测试

git clone https://github.com/2type/rem.git
# or
https://github.com/2type/rem/archive/gh-pages.zip

cd lessrem
npm install
gulp

fis-less

var LessPluginFunctions = require('less-plugin-functions')
fis.match('*.less', {
    rExt: '.css',
    parser: fis.plugin('less-2.x', {
        plugins: [
            new LessPluginFunctions()
        ]
    })
})