lessrem

/less/demo.less

@import "./rem";
.demo {
    width:rem(640);
    height:rem(100);
    box-shadow: rem(11) rem(22) rem(33) pink;
    background: #eee;
}

/dist/demo.css

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

/less/rem.less

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

view demo

http://fast-flow.github.io/lessrem/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/fast-flow/fast.git
# or 
https://github.com/fast-flow/fast/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()
        ]
    })
})