«

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

老王 发布于 阅读:12917 前端开发


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


前端开发