Grunt-contrib-sass NPM

grunt-contrib-sass v2.0.0

Compile Sass to CSS

Getting Started

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-contrib-sass --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-contrib-sass');

Sass task

Run this task with the grunt sass command.

Sass is a preprocessor that adds nested rules, variables, mixins and functions, selector inheritance, and more to CSS. Sass files compile into well-formatted, standard CSS to use in your site or application.

This task requires you to have Ruby and Sass installed. If you're on OS X or Linux you probably already have Ruby installed; test with ruby -v in your terminal. When you've confirmed you have Ruby installed, run gem install sass to install Sass.

Note: Files that begin with "_" are ignored even if they match the globbing pattern. This is done to match the expected Sass partial behaviour.

Options

sourcemap

Type: String
Default: auto

Values:

auto - relative paths where possible, file URIs elsewhere
file - always absolute file URIs
inline - include the source text in the sourcemap
none- no sourcemaps

Requires Sass 3.4.0, which can be installed with gem install sass

trace

Type: Boolean
Default: false

Show a full traceback on error.

unixNewlines

Type: Boolean
Default: false on Windows, otherwise true

Force Unix newlines in written files.

check

Type: Boolean
Default: false

Just check the Sass syntax, does not evaluate and write the output.

style

Type: String
Default: nested

Output style. Can be nested, compact, compressed, expanded.

precision

Type: Number
Default: 5

How many digits of precision to use when outputting decimal numbers.

quiet

Type: Boolean
Default: false

Silence warnings and status messages during compilation.

compass

Type: Boolean
Default: false

Make Compass imports available and load project configuration (config.rb located close to the Gruntfile.js).

debugInfo

Type: Boolean
Default: false

Emit extra information in the generated CSS that can be used by the FireSass Firebug plugin.

lineNumbers

Type: Boolean
Default: false

Emit comments in the generated CSS indicating the corresponding source line.

loadPath

Type: String|Array

Add a (or multiple) Sass import path.

require

Type: String|Array

Require a (or multiple) Ruby library before running Sass.

cacheLocation

Type: String
Default: .sass-cache

The path to put cached Sass files.

noCache

Type: Boolean
Default: false

Don't cache to sassc files.

bundleExec

Type: Boolean
Default: false

Run sass with bundle exec: bundle exec sass.

update

Type: Boolean
Default: false

Only compile changed files.

Examples

Example config

grunt.initConfig({
  sass: {                              // Task
    dist: {                            // Target
      options: {                       // Target options
        style: 'expanded'
      },
      files: {                         // Dictionary of files
        'main.css': 'main.scss',       // 'destination': 'source'
        'widgets.css': 'widgets.scss'
      }
    }
  }
});

grunt.loadNpmTasks('grunt-contrib-sass');

grunt.registerTask('default', ['sass']);

Compile

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'main.css': 'main.scss'
      }
    }
  }
});

Concat and compile

Instead of concatenating the files, just @import them into another .sass file eg. main.scss.

Compile multiple files

You can specify multiple destination: source items in files.

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'main.css': 'main.scss',
        'widgets.css': 'widgets.scss'
      }
    }
  }
});

Compile files in a directory

Instead of naming all files you want to compile, you can use the expand property allowing you to specify a directory. More information available in the grunt docs - Building the files object dynamically.

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        expand: true,
        cwd: 'styles',
        src: ['*.scss'],
        dest: '../public',
        ext: '.css'
      }]
    }
  }
});

Release History

2020-03-04 v2.0.0 Update dependencies. Now requires at least Node 8.
2016-03-04 v1.0.0 Bump chalk. Update to docs and project structure.
2015-02-06 v0.9.0 Remove banner option. Allow using --force to ignore compile errors. Increase concurrency count from 2 to 4. Improve Windows support.
2014-08-24 v0.8.1 Fix check option.
2014-08-21 v0.8.0 Support Sass 3.4 Source Map option. Add update option.
2014-08-09 v0.7.4 Fix bundleExec option. Fix os.cpus() issue. Log sass command when --verbose flag is set.
2014-03-06 v0.7.3 Only create empty dest files when they don't already exist.
2014-02-02 v0.7.2 Fix error reporting when Sass is not available.
2014-01-28 v0.7.1 Fix regression of Bundler support.
2014-01-26 v0.7.0 Improve Windows support.
2013-12-10 v0.6.0 Ignore files where filename have leading underscore.
2013-08-21 v0.5.0 Add banner option.
2013-07-06 v0.4.1 Use file.orig.src if file.src does not exist and return early to avoid passing non-existent files to sass binary.
2013-06-30 v0.4.0 Rewrite task to be able to support Source Maps. Compile Sass files in parallel for better performance.
2013-03-26 v0.3.0 Add support for bundle exec. Make sure .css files are compiled with SCSS.
2013-02-15 v0.2.2 First official release for Grunt 0.4.0.
2013-01-25 v0.2.2rc7 Updating grunt/gruntplugin dependencies to rc7. Changing in-development grunt/gruntplugin dependency versions from tilde version ranges to specific versions.
2013-01-09 v0.2.2rc5 Updating to work with grunt v0.4.0rc5. Switching to this.files API. Add separator option.
2012-11-05 v0.2.0 Grunt 0.4 compatibility. Improve error message when Sass binary couldn't be found
2012-10-12 v0.1.3 Rename grunt-contrib-lib dep to grunt-lib-contrib.
2012-10-08 v0.1.2 Fix regression for darwin.
2012-10-05 v0.1.1 Windows support.
2012-09-24 v0.1.0 Initial release.