使用插件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; }