Less is a CSS pre-processor allowing you to create variables, mixins, and functions in a effort to make your CSS more maintainable. In this article, we’ll discuss the process of getting less configured with gulp so that you can start using this CSS pre-processor today within your own projects.

In this article, I touch on the basics of configuring less with gulp. For more detailed information on the configuration options available read the documentation here.

Installation

First, let’s install gulp.

yarn add gulp

Next, we'll install gulp-less

yarn add gulp-less

Configuration

Now that we have our packages installed, we’ll want to setup our gulpfile.js to use these new plugins.

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('default', function() {

});

Next, lets create our less file. We’ll store it in the path assets/less/custom.less.

@fontColor: #000101;
@priceColor: green;

.product {
  background-color: #aaaaaa;
  color: @fontColor;

      &--featured {
        background-color: #009998;
      }

      &__name {
        color: @fontColor
      }

      &__price {
        color: @priceColor;
      }
}

Now that we have our example less file, lets go ahead and configure our gulp file to process it. Within our gulpfile.js default block we’ll want to add the following.

return gulp.src('./assets/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./build/css/'));

In the above example you’re passing the source first, and then passing those files to the less() function, and lastly letting gulp know where to put the output. In our example, we’re storing the output to a ./build/css/ directory.

Here’s the full contents to our gulpfile.js file for reference.

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('default', function() {
    return gulp.src('./assets/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./build/css/'));
});

Testing

Now that we have everything setup, we’ll want to run our gulp command.

gulp

This should create a new file for custom.css within our ./build/css/ directory. I have included the contents of our custom.css, which was created during the gulp process for you to see how gulp transforms less into CSS.

.product {
  background-color: #aaaaaa;
  color: #000101;
}
.product--featured {
  background-color: #009998;
}
.product__name {
  color: #000101;
}
.product *__price {
  color: green;
}

This tutorial was not setup to teach you less, but instead to teach you how to start using LESS with gulp. If you do want to learn more about LESS, then I’d suggest reading through the documentation for a detailed explanation here.