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.34375rem0.6875rem1.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

vargulp=require('gulp')varless=require('gulp-less')varLessPluginFunctions=require('less-plugin-functions')gulp.task('less',function(){gulp.src('less/**.less').pipe(less({// less-plugin-functions is Important// less-plugin-functions 为 less 提供自定义函数功能plugins: [newLessPluginFunctions()]})).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

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