grunt-recursive-compass

A custom grunt.js plugin that will recursively execute a Compass compile for selected sass/scss files.

grunt-recursive-compass

A custom Grunt plugin that will recursively execute a Compass compile for selected sass/scss files.

Grunt Compatibility

  • grunt-recursive-compass@0.2.x is compatible with grunt >= 0.4.x

Install this grunt plugin next to your project's Gruntfile.js with:

npm install grunt-recursive-compass --save-dev

Then add this line to your project's Gruntfile.js gruntfile:

grunt.loadNpmTasks('grunt-recursive-compass');

Compass operates on a folder level, because of this you don't specify any src/dest, but instead define the sassDir and cssDir options. In the case of grunt-recursive-compass you can also supply it a set of files for it to process or exclude. Because of this you are able to achieve fine detail over what you would like to process.

Note that this release will recompile all files passed to the task when setup with a grunt-contrib-watch v0.6.x task.

grunt-recursive-compass@0.2.x will support grunt@0.4.x. This version will compile only the changed files when setup with a grunt-contrib-watch v0.6.x task.

/**
 * grunt-recursive-compass
 * https://github.com/psyrendust/grunt-recursive-compass/
 *
 * Copyright (c) 2014 Larry Gordon
 * http://psyrendust.mit-license.org/2014/license.html
 */
 
'use strict';
 
module.exports = function(grunt) {
 
  grunt.initConfig({
 
    'recursive-compass': {
      dev: {
        src: ['test/fixtures/**/*.{scss,sass}'],
        options: {
          outputStyle: 'expanded',
          sassDir: 'test/fixtures',
          cssDir: 'test/fixtures'
        }
      },
      build: {
        src: ['test/fixtures/**/*.{scss,sass}'],
        options: {
          outputStyle: 'compressed',
          sassDir: 'test/fixtures',
          cssDir: 'test/fixtures'
        }
      }
    },
 
    watch: {
      dev: {
        files: [
          'test/fixtures/**/*.{scss,sass}'
        ],
        tasks: ['recursive-compass:dev']
      }
    }
 
  });
 
  // Load the module 
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-recursive-compass');
 
  // Default task. 
  grunt.registerTask('default', 'recursive-compass:build');
 
};
 
'recursive-compass': {
  target: {
    src: [
      'test/fixtures/**/*.{scss,sass}',
      '!test/fixtures/**/foo.{scss,sass}'
    ]
    options: {
      sassDir: 'test/fixtures',
      cssDir: 'test/fixtures'
    }
  }
}

For a full list of Compass options see Parameters below.

'recursive-compass': {
  target: {
    src: ['test/fixtures/**/*.{scss,sass}'],
    options: {
      outputStyle: 'compressed',
      sassDir: 'test/fixtures',
      cssDir: 'test/fixtures'
    }
  }
}
grunt.initConfig({
  'recursive-compass': {
    dev: {
      src: ['test/fixtures/**/*.{scss,sass}'],
      options: {
        outputStyle: 'expanded',
        sassDir: 'test/fixtures',
        cssDir: 'test/fixtures'
      }
    },
    build: {
      src: ['test/fixtures/**/*.{scss,sass}'],
      options: {
        outputStyle: 'compressed',
        sassDir: 'test/fixtures',
        cssDir: 'test/fixtures'
      }
    }
  },
 
  watch: {
    dev: {
      files: [
        'test/fixtures/**/*.{scss,sass}'
      ],
      tasks: ['recursive-compass']
    }
  }
});

This controls how this task (and its helpers) operate and should contain key:value pairs, see options below.

Compass doesn't expose all of its [options][config] through the CLI, which this task makes use of. Not all Compass options are available. This plugin does not support a config.rb file or the raw option.

Type: String

Generate a sourcemap during compilation.

Type: String

Display compilation times.

Type: String

Turns on sass's debuging information

Type: String

Turns off sass's debuging information

Type: String

Require the given ruby LIBRARY before running commands. This is used to access compass plugins without having a project configuration file.

Type: String

Load the framework or extensions found in the FRAMEWORK directory.

Type: String

Load all the frameworks or extensions found in the FRAMEWORKS_DIR directory.

Type: String

Makes files under the IMPORT_PATH folder findable by Sass's @import directive.

Type: String

Quiet mode.

Type: String

Show a full stacktrace on error

Type: String

Allows compass to overwrite existing files.

Type: String

Turn off colorized output.

Type: String

Specify the location of the configuration file explicitly.

Type: String

Tell compass what kind of application it is integrating with. Can be stand_alone (default) or rails.

Type: String

The base directory for your application.

Type: String

The source directory where you keep your sass stylesheets.

Type: String

The target directory where you keep your css stylesheets.

Type: String

The directory where you keep your images.

Type: String

The directory where you keep your javascripts.

Type: String

The directory where you keep your fonts.

Type: String

Use sensible defaults for your current environment. One of: development (default), production.

Type: String

Select a CSS output mode. One of: nested, expanded, compact, compressed.

Type: String

Make compass asset helpers generate relative urls to assets.

Type: String

Disable line comments.

Type: String

Set this to the root of your project when deployed

Type: String

The path where you generate your images

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

To run the Nodeunit test suite use the default grunt task:

grunt

MIT © Larry Gordon