使用插件less-plugin-functions让gulp-less支持自定义函数

在使用gulp-less预编译css的开发过程中，可能会遇到需要使用自定义函数的功能，比如，在开发移动端时，我们可能需要将px单位转为rem，可以通过自定义一个自定函数帮助我们转换，我们可以使用less-plugin-functions来实现。

1、在gulpfile.js中：

var gulp = require('gulp'),
    less = require('gulp-less'),
    lessFunctions = require('less-plugin-functions'), //1.less function插件
    lessFn = new lessFunctions(); //2.创建一个实例

gulp.task('less', ['sprite'], function () {
    gulp.src('src/less/index.less')
        .pipe(less({
            plugins: [lessFn]  //3.使用插件
        }))
        .pipe(gulp.dest('src/css'));
});

这样我们就能使用less的自定义函数功能

2、假设在index.less文件中：

.function {
  //定义一个函数
  .px2rem(@px) {
    return: unit(@px/192, rem); //根据实际情况换算
  }
}

//使用
.box{
  width:px2rem(720px);
  height:px2rem(384);  
}

3、编译后的index.css则是：

.box{
  width:3.75rem;
  height:2rem;  
}