How to process SASS/LESS in GruntJS

Is there a version of grunt-processhtml for SASS/LESS ?
In my scss I need to set variable $icon-font-path (yes, bootstrap) to different values depending whether we are in dev mode or we are assembling production code.

The last thing I want to do is to move the variable declaration to a separate file (dev & prod version) and substitute them in my build process.

My Gruntfile: https://github.com/vucalur/django-wibses/blob/master/wibses/yo/Gruntfile.js

Solution

Sure there is a way, use importPath option of https://github.com/gruntjs/grunt-contrib-compass, which would make files under the specified folder findable by Sass's @import directive.

compass: {
  dev: {
    options: {
      importPath: 'src/sass/icon-path-dev',
    }
  },
  prod: {
    options: {
      importPath: 'src/sass/icon-path-prod',
    }
  }

And icon-path-dev will have _filepathvar.scss which would have your variable as

$icon-font-path  : 'dev-font/path';

And icon-path-prod will have _filepathvar.scss which would have your variable as

$icon-font-path  : 'prod-font/path';

You can then use this under your main scss file like

@import "filepathvar";