sindresorhus / grunt-sass

Compile Sass to CSS

grunt-sass

Compile Sass to CSS using Dart Sass or Node Sass.

Before filing an issue with this repository, please consider:

• Asking support questions on Use Stack Overflow.

• Reporting issues with the output on the Dart Sass or LibSass issue trackers, depending which implementation you're using.

• Reporting installation issues on the Dart Sass or Node Sass issue trackers, depending on which implementation you're using.

Install

$ npm install --save-dev node-sass grunt-sass

Usage

const sass = require('node-sass');

require('load-grunt-tasks')(grunt);

grunt.initConfig({
	sass: {
		options: {
			implementation: sass,
			sourceMap: true
		},
		dist: {
			files: {
				'main.css': 'main.scss'
			}
		}
	}
});

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

You can choose whether to use Dart Sass or Node Sass by passing the module to the implementation option. One implementation or the other must be passed.

Note that when using Dart Sass, synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers package to call asynchronous importers from the synchronous code path. To enable this, pass the Fiber class to the fiber option:

const Fiber = require('fibers');
const sass = require('sass');

require('load-grunt-tasks')(grunt);

grunt.initConfig({
	sass: {
		options: {
			implementation: sass,
			fiber: Fiber,
			sourceMap: true
		},
		dist: {
			files: {
				'main.css': 'main.scss'
			}
		}
	}
});

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

Files starting with _ are ignored to match the expected Sass partial behaviour.

Options

See the Node Sass options, except for file, outFile, success, error.

The default value for the precision option is 10, so you don't have to change it when using Bootstrap.

grunt-sass's Issues

Include paths don't work

For some reason the includePaths argument is having no effect. I've reproduced the issue in this project. I suspect that this problem actually has nothing to do with grunt-sass because it looks like it's passing the arguments through to node-sass and node-sass is delegating to libsass correctly, but I thought it would be best to start here.

Am I just making a silly mistake?

Specify source and output directory

Is it possible to specify a source folder and output folder?

Something like,

sass: {
      dist: {
        files: [{
          expand: true,
          cwd: 'assets/scss',
          src: ['**/*.scss'],
          dest: 'assets/css'
        }]
      }
    }

Processing stops on error and subsequent changes doesn't reprocess the file

In case there is an error in the scss file the processing stops, which is expected, but further changes to the file doesn't cause reprocessing. Not sure if this is caused by grunt-sass or grunt-este-watch which I use in place of grunt-contrib-watch. The reason I am posting this issue here is because grunt-contrib-sass works fine but when I swap it with grunt-sass is when this issue appears.

module error

Hi,

I couldn't make the grunt-contrib-sass working, no file was written, and no error. Not sure what was happening. So I tried grunt-sass as well and I got this error:

Error: Cannot find module 'grunt-contrib-lib'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:362:17)
at require (module.js:378:17)
at Object.module.exports (/EDITED/node_modules/grunt-sass/tasks/sass.js:8:17)
at Object.task.registerMultiTask.thisTask (/usr/local/lib/node_modules/grunt/lib/grunt/task.js:109:15)
at Object.task.registerTask.thisTask.fn (/usr/local/lib/node_modules/grunt/lib/grunt/task.js:58:16)
at Task. (/usr/local/lib/node_modules/grunt/lib/util/task.js:343:36)
at Task. (/usr/local/lib/node_modules/grunt/lib/util/task.js:319:9)
at Task. (/usr/local/lib/node_modules/grunt/lib/util/task.js:346:11)

Tabbing present on compiled css

SASS source:

.item-edit {
  @include transition(left 0.2s ease-in-out, opacity 0.2s ease-in-out);
  position: absolute;
  top: 0;
  left: 8px;
  z-index: $z-index-item-edit;
  width: 48px;
  height: 100%;
  line-height: 100%;

  .button {
    height: 100%;

    &.icon {
      @include display-flex();
      @include align-items(center);
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      color: $assertive;
      font-size: 24px;
    }
  }

  &.ng-enter {
    @include transition(left 0.2s ease-in-out, opacity 0.2s ease-in-out);
    left: -48px;
    opacity: 0;
  }
  &.ng-enter-active {
    left: 8px;
    opacity: 1;
  }
  &.ng-leave {
    @include transition(left 0.2s ease-in-out, opacity 0.2s ease-in-out);
    left: 0px;
    opacity: 1;
  }
  &.ng-leave-active {
    left: -48px;
    opacity: 0;
  }
}

Compiled CSS:

.item-edit {
  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
  position: absolute;
  top: 0;
  left: 8px;
  z-index: 0;
  width: 48px;
  height: 100%;
  line-height: 100%; }
  .item-edit .button {
    height: 100%; }
    .item-edit .button.icon {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      color: #ef4e3a;
      font-size: 24px; }
  .item-edit.ng-enter {
    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -moz-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
    left: -48px;
    opacity: 0; }
  .item-edit.ng-enter-active {
    left: 8px;
    opacity: 1; }
  .item-edit.ng-leave {
    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -moz-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
    left: 0px;
    opacity: 1; }
  .item-edit.ng-leave-active {
    left: -48px;
    opacity: 0; }

Correct space for tabbing on compiled CSS:

.item-edit {
  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
  position: absolute;
  top: 0;
  left: 8px;
  z-index: 0;
  width: 48px;
  height: 100%;
  line-height: 100%;
}
.item-edit .button {
  height: 100%;
}
.item-edit .button.icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  color: #ef4e3a;
  font-size: 24px;
}
.item-edit.ng-enter {
  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
  left: -48px;
  opacity: 0;
}
.item-edit.ng-enter-active {
  left: 8px;
  opacity: 1;
}

The state of Compass

Is there a libsass version of Compass that grunt-sass can leverage in Node? I'm out of the loop on the happenings there.

Watching changes and compiling scss on-the-fly

How to configure grunt-sass to start watching for scss files changes and running compile job on every change?

Can't compile SASS at Windows 7 32 bits

Can someone help?

grunt file:
sass: {
dist: {
src : 'src/sass/a.sass',
dest : 'dest/js/app.css'
}
}

console error:
Running "sass:dist" (sass) task

Error: Cannot find module 'c:\Users\usilvmu\Documents\projetos\JAVASCRIPT\POC_AngularProjeto\node_modules\grunt-sass\node_modules\node-sass/precompiled/win32-ia32/binding'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:362:17)
at require (module.js:378:17)
at Object. (c:\Users\usilvmu\Documents\projetos\JAVASCRIPT\POC_AngularProjeto\node_modules\grunt-sass\node_modules\node-sass\sass.js:11:13)
at Module._compile (module.js:449:26)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:362:17)

Source maps don't work with Grunt dynamic file objects

When using Grunt dynamic file objects the sourceMappingURL is set to undefined and if you're changing the file extension the source map refers to the original file extension. Here's my config:

sass: {
    all: {
        options: {
            sourceComments: 'map'
        },
        files: [{
            expand: true,
            cwd: '<%= config.root %>/sass/',
            src: [
                '**/*.scss',
                '!**/_*.scss'
            ],
            dest: '<%= config.root %>/build/css/',
            ext: '.css'
        }]
    }
}

Update node-sass dependency to ~0.8.3

Fixes scss comping issue with "@"

Extend Placeholder not working

Has anyone else experienced issues using extend placeholder selectors?

fails in node v0.8.2

Hi. Thanks for sharing grunt-sass.
I did these things by calling ruby sass. So this looks sweet.
But I found that this fails in node v0.8.2.
I got successed with node v0.6.2.

Here's the error message.

zsh:
zsh: segmentation fault grunt

bash:
Segmentation fault: 11

This may be caused of sass comiling library.

Here's the tested code
https://github.com/Takazudo/gruntExamples/tree/master/loadNpmTasksExamples/sass

Thanks

Libsass Update

Would it be possible to pull the latest version of Libsass?
Having some issues that the owner of Libsass may be resolved with that update.

Thanks.

Warning: Module version mismatch. Expected 11, got 1.

I'm using node 0.10.3 and npm 1.2.7.

$ grunt sass --verbose
Running tasks: sass

Running "sass" task

Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: public/css/vendor/bootstrap.css, public/css/application.css.scss, public/css/masthead/masthead.css.scss, public/css/masthead/planner.css.scss, public/css/masthead/rundavoos.css.scss -> public/css/application.css
Warning: Module version mismatch. Expected 11, got 1. Use --force to continue.

Aborted due to warnings.

Placeholders compiling improperly

I'm not sure whether this is a problem with grunt-sass or with node-sass ... but here's what's happening:

If I use grun-sass to compile this file ---- https://github.com/davidtheclark/scss-utils/blob/master/src/components/_lists.scss, which contains nothing but mixins and placeholders ---- I get the following outputted CSS:

%u-list-float, %u-list-inline, %u-list-comma {
  list-style-type: none;
  margin: 0;
  padding: 0; }

%u-list-float > li {
  float: left; }

That's suggesting that the compiler isn't properly handling @extend placeholders.

If I compile the same file with grunt-contrib-sass, I get no such weirdness ---- it works fine.

Not able to compile on Win7 x64

The gruntfile:

module.exports = function( grunt ) {
'use strict';

grunt.initConfig({
    sass: {
        test: {
            src: [
                'css/app.scss'
            ],
            dest: 'compiled.css'
        }
    },
    lint: {
        files: [
            'grunt.js',
            'tasks/**/*.js'
        ]
    },
    watch: {
        files: '<config:lint.files>',
        tasks: 'default'
    },
    jshint: {
        options: {
            es5: true,
            esnext: true,
            bitwise: true,
            curly: true,
            eqeqeq: true,
            latedef: true,
            newcap: true,
            noarg: true,
            noempty: true,
            regexp: true,
            undef: true,
            strict: true,
            trailing: true,
            smarttabs: true,
            node: true
        }
    }
});

grunt.loadTasks('tasks');

grunt.registerTask('default', 'lint sass:test');

};

and it's output:

$grunt.cmd
path.existsSync is now called 'fs.existsSync'.
Running "lint:files" (lint) task
Lint free.

Running "sass" (sass) task

Error: Cannot find module 'C:\...\[project]\node_modules\node-sass/precompiled/win32-ia32/binding'
    at Function.Module._resolveFilename (module.js:338:15)
    ...

$

Projects file structure (only the relevant files):

project_folder:

grunt.js
|-node_modules
  |-.bin
  |-grunt-sass
  |-node-sass
|-css

Compiler throws an error with placeholder selectors

Im having an issue with grunt-sass, which refuses to compile placeholder selectors like this:

%webfont{
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

It always returns:
Warning: css-src/components/_typography.scss:8: error: invalid top-level expression

Despite being a warning, the file doesn't get compiled.

Thanks.

Getting a ton of error messages when I try "npm install --save-dev grunt-sass"

I'm using nodejs v.0.11.5, npm v.1.3.7, and grunt 0.4.1.

Here we go:

zak$ npm install --save-dev grunt-sass
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
npm http GET https://registry.npmjs.org/grunt-sass
npm http 304 https://registry.npmjs.org/grunt-sass
npm http GET https://registry.npmjs.org/node-sass
npm http GET https://registry.npmjs.org/grunt-lib-contrib
npm http 304 https://registry.npmjs.org/grunt-lib-contrib
npm http 304 https://registry.npmjs.org/node-sass
npm http GET https://registry.npmjs.org/zlib-browserify/0.0.1
npm http 304 https://registry.npmjs.org/zlib-browserify/0.0.1
npm http GET https://registry.npmjs.org/mkdirp
npm http GET https://registry.npmjs.org/colors/0.6.0-1
npm http GET https://registry.npmjs.org/optimist
npm http 304 https://registry.npmjs.org/mkdirp
npm http 304 https://registry.npmjs.org/colors/0.6.0-1
npm http 304 https://registry.npmjs.org/optimist
npm http GET https://registry.npmjs.org/wordwrap
npm http 304 https://registry.npmjs.org/wordwrap

> [email protected] install /Users/zak/MyProject/node_modules/grunt-sass/node_modules/node-sass
> node rebuild.js

  CXX(target) Release/obj.target/binding/binding.o
../binding.cpp:33:24: error: 'operator->' is a private member of 'v8::Persistent<v8::Function>'
        ctx_w->callback->Call(Context::GetCurrent()->Global(), argc, argv);
        ~~~~~~~~~~~~~~~^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:771:16: note: declared private here
  V8_INLINE(T* operator->() const) { return val_; }
               ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:41:24: error: 'operator->' is a private member of 'v8::Persistent<v8::Function>'
        ctx_w->callback->Call(Context::GetCurrent()->Global(), argc, argv);
        ~~~~~~~~~~~~~~~^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:771:16: note: declared private here
  V8_INLINE(T* operator->() const) { return val_; }
               ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:69:45: error: 'New' is a private member of 'v8::Persistent<v8::Function>'
    ctx_w->callback = Persistent<Function>::New(callback);
                                            ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:23: note: declared private here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
                      ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:69:57: error: too few arguments to function call, expected 2, have 1
    ctx_w->callback = Persistent<Function>::New(callback);
                      ~~~~~~~~~~~~~~~~~~~~~~~~~         ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:3: note: 'New' declared here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
  ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:31: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                              ^
../binding.cpp:91:24: error: 'operator->' is a private member of 'v8::Persistent<v8::Function>'
        ctx_w->callback->Call(Context::GetCurrent()->Global(), argc, argv);
        ~~~~~~~~~~~~~~~^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:771:16: note: declared private here
  V8_INLINE(T* operator->() const) { return val_; }
               ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:99:29: error: 'operator->' is a private member of 'v8::Persistent<v8::Function>'
        ctx_w->errorCallback->Call(Context::GetCurrent()->Global(), argc, argv);
        ~~~~~~~~~~~~~~~~~~~~^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:771:16: note: declared private here
  V8_INLINE(T* operator->() const) { return val_; }
               ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:128:45: error: 'New' is a private member of 'v8::Persistent<v8::Function>'
    ctx_w->callback = Persistent<Function>::New(callback);
                                            ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:23: note: declared private here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
                      ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:128:57: error: too few arguments to function call, expected 2, have 1
    ctx_w->callback = Persistent<Function>::New(callback);
                      ~~~~~~~~~~~~~~~~~~~~~~~~~         ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:3: note: 'New' declared here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
  ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:31: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                              ^
../binding.cpp:129:50: error: 'New' is a private member of 'v8::Persistent<v8::Function>'
    ctx_w->errorCallback = Persistent<Function>::New(errorCallback);
                                                 ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:23: note: declared private here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
                      ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:129:67: error: too few arguments to function call, expected 2, have 1
    ctx_w->errorCallback = Persistent<Function>::New(errorCallback);
                           ~~~~~~~~~~~~~~~~~~~~~~~~~              ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:3: note: 'New' declared here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
  ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:31: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                              ^
../binding.cpp:200:24: error: 'operator->' is a private member of 'v8::Persistent<v8::Function>'
        ctx_w->callback->Call(Context::GetCurrent()->Global(), argc, argv);
        ~~~~~~~~~~~~~~~^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:771:16: note: declared private here
  V8_INLINE(T* operator->() const) { return val_; }
               ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:208:29: error: 'operator->' is a private member of 'v8::Persistent<v8::Function>'
        ctx_w->errorCallback->Call(Context::GetCurrent()->Global(), argc, argv);
        ~~~~~~~~~~~~~~~~~~~~^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:771:16: note: declared private here
  V8_INLINE(T* operator->() const) { return val_; }
               ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:237:45: error: 'New' is a private member of 'v8::Persistent<v8::Function>'
    ctx_w->callback = Persistent<Function>::New(callback);
                                            ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:23: note: declared private here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
                      ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:237:57: error: too few arguments to function call, expected 2, have 1
    ctx_w->callback = Persistent<Function>::New(callback);
                      ~~~~~~~~~~~~~~~~~~~~~~~~~         ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:3: note: 'New' declared here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
  ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:31: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                              ^
../binding.cpp:238:50: error: 'New' is a private member of 'v8::Persistent<v8::Function>'
    ctx_w->errorCallback = Persistent<Function>::New(errorCallback);
                                                 ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:23: note: declared private here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
                      ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:69: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                    ^
../binding.cpp:238:67: error: too few arguments to function call, expected 2, have 1
    ctx_w->errorCallback = Persistent<Function>::New(errorCallback);
                           ~~~~~~~~~~~~~~~~~~~~~~~~~              ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:782:3: note: 'New' declared here
  V8_INLINE(static T* New(Isolate* isolate, T* that));
  ^
/Users/zak/.node-gyp/0.11.5/deps/v8/include/v8.h:80:31: note: expanded from macro 'V8_INLINE'
#define V8_INLINE(declarator) inline __attribute__((always_inline)) declarator
                              ^
../binding.cpp:287:5: error: no matching function for call to 'NODE_SET_METHOD'
    NODE_SET_METHOD(target, "oldRender", OldRender);
    ^~~~~~~~~~~~~~~
/Users/zak/.node-gyp/0.11.5/src/node.h:149:25: note: expanded from macro 'NODE_SET_METHOD'
#define NODE_SET_METHOD node::NODE_SET_METHOD
                        ^~~~~~~~~~~~~~~~~~~~~
/Users/zak/.node-gyp/0.11.5/src/node.h:140:13: note: candidate function [with TypeName = v8::Handle<v8::Object>] not viable: no
      known conversion from 'Handle<v8::Value> (const v8::Arguments &)' to 'v8::FunctionCallback' (aka 'void (*)(const
      FunctionCallbackInfo<v8::Value> &)') for 3rd argument
inline void NODE_SET_METHOD(const TypeName& recv,
            ^
../binding.cpp:288:5: error: no matching function for call to 'NODE_SET_METHOD'
    NODE_SET_METHOD(target, "render", Render);
    ^~~~~~~~~~~~~~~
/Users/zak/.node-gyp/0.11.5/src/node.h:149:25: note: expanded from macro 'NODE_SET_METHOD'
#define NODE_SET_METHOD node::NODE_SET_METHOD
                        ^~~~~~~~~~~~~~~~~~~~~
/Users/zak/.node-gyp/0.11.5/src/node.h:140:13: note: candidate function [with TypeName = v8::Handle<v8::Object>] not viable: no
      known conversion from 'Handle<v8::Value> (const v8::Arguments &)' to 'v8::FunctionCallback' (aka 'void (*)(const
      FunctionCallbackInfo<v8::Value> &)') for 3rd argument
inline void NODE_SET_METHOD(const TypeName& recv,
            ^
../binding.cpp:289:5: error: no matching function for call to 'NODE_SET_METHOD'
    NODE_SET_METHOD(target, "renderSync", RenderSync);
    ^~~~~~~~~~~~~~~
/Users/zak/.node-gyp/0.11.5/src/node.h:149:25: note: expanded from macro 'NODE_SET_METHOD'
#define NODE_SET_METHOD node::NODE_SET_METHOD
                        ^~~~~~~~~~~~~~~~~~~~~
/Users/zak/.node-gyp/0.11.5/src/node.h:140:13: note: candidate function [with TypeName = v8::Handle<v8::Object>] not viable: no
      known conversion from 'Handle<v8::Value> (const v8::Arguments &)' to 'v8::FunctionCallback' (aka 'void (*)(const
      FunctionCallbackInfo<v8::Value> &)') for 3rd argument
inline void NODE_SET_METHOD(const TypeName& recv,
            ^
fatal error: too many errors emitted, stopping now [-ferror-limit=]
20 errors generated.
make: *** [Release/obj.target/binding/binding.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/zak/.nvm/v0.11.5/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:267:23)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:103:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:794:12)
gyp ERR! System Darwin 11.4.2
gyp ERR! command "node" "/Users/zak/.nvm/v0.11.5/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/zak/MyProject/node_modules/grunt-sass/node_modules/node-sass
gyp ERR! node -v v0.11.5
gyp ERR! node-gyp -v v0.10.9
gyp ERR! not ok
[email protected] node_modules/grunt-sass
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected])

Warning: source string:1: error: invalid top-level expression

Issue #41 Warning: source string:1: error: invalid top-level expression
Issue #46: Warning: source string:1: error: invalid top-level expression

Ran into this error yesterday on latest grunt-sass, on Windows8.

Read the two links above and giving the full path does not resolve it.
If I put the files in the same directory that I am running the grunt command from, it will succeed.
I believe it may be related to mishandling the path separator symbol

Wildcard support in dest/src pairs

Creating this from #16 because I want to unlink that code from the issue.

It would be good to have wildcard support where each file in src maps to a similarly named file in the destination folder.

Related issue in grunt core: gruntjs/grunt#450

Implementation of this that you could use: https://github.com/hitsthings/grunt-expandpairs

..

How to execute?

The readme states that its a multi-stepper, and example usage, but not the command you should use to execute :-)

Any word on compression?

Task throws error when running compile.

Using

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
            files: 'sass/*',
        tasks: 'sass'
    },

    sass: {
      dist: {
        src: 'sass/main.scss',
        dest: 'css/main.css'
      }
    }  
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.registerTask('default', 'watch');
};

Yields the following output

Running "sass:dist" (sass) task
Uncompressed size: 367 bytes.

/Users/benschwarz/Documents/Projects/xx/node_modules/grunt/tasks/min.js:89
ompressed size: ' + gzipSize.green + ' bytes gzipped (' + String(min.length).g
                                                                    ^
TypeError: Cannot read property 'length' of undefined
    at Object.module.exports (/Users/benschwarz/Documents/Projects/xx/node_modules/grunt/tasks/min.js:89:93)
    at Task.helper (/Users/benschwarz/Documents/Projects/xx/node_modules/grunt/lib/util/task.js:117:19)
    at module.exports (/Users/benschwarz/Documents/Projects/xx/node_modules/grunt-sass/tasks/sass.js:22:10)

Issue with Bourbon

I import the bourbon SASS library to my .scss files. It seems to not support it whenever I run "grunt sass". Please fix

Running "sass:dev" (sass) task
Warning: :3: error: error reading file "bourbon/bourbon"
Use --force to continue.

Sourcemap points to the wrong file

Not sure if this is a libsass or node-sass problem, but after searching through their issue lists, I was unable to find any mention of it so perhaps this is a config problem on our side.

At the moment, our config looks like this:

'dev-core': {
    options: {
        sourceComments: 'map',
        sourceMap: 'css/core.css.map'
    },
    files: {
        'css/core.css': 'sass/core.scss'
    }
},

Any suggestions as to why this might be the case?

To be clear, it is pointing to both the wrong file and the wrong line.

error: non-terminal statement or declaration must end with ';'

Just switched from grunt-contrib-sass to grunt-sass and got this error:

$ grunt sass
>> Local Npm module "grunt-cli" not found. Is it installed?

Running "sass:compile" (sass) task
Warning: app/styles/_fonts.scss:3: error: non-terminal statement or declaration must end with ';'
 Use --force to continue.

Aborted due to warnings.

Here's the scss that was causing it. Seems to be related to the src definition:

@font-face {
  font-family: 'OpenSans';
  src: url(font-path('opensans/opensans-regular.woff')) format('woff'),
       url(font-path('opensans/opensans-regular.ttf'))  format('truetype');
  font-weight: normal;
  font-style: normal;
}

CSS Bundles

Is there a way for creating css bundles, for example one for app specific styles and another for vendor styles?
The app styles would import vendor styles for using mixins, functions etc but the files called with import should get concatenated in a separate css file.

Grunt 0.4 Release

I'm posting this issue to let you know that we will be publishing Grunt 0.4 on Monday, February 18th.

If your plugin is not already Grunt 0.4 compatible, would you please consider updating it? For an overview of what's changed, please see our migration guide.

If you'd like to develop against the final version of Grunt before Monday, please specify "grunt": "0.4.0rc8" as a devDependency in your project. After Monday's release, you'll be able to use "grunt": "~0.4.0" to actually publish your plugin. If you depend on any plugins from the grunt-contrib series, please see our list of release candidates for compatible versions. All of these will be updated to final status when Grunt 0.4 is published.

Also, in an effort to reduce duplication of effort and fragmentation in the developer community, could you review the grunt-contrib series of plugins to see if any of your functionality overlaps significantly with them? Grunt-contrib is community maintained with 40+ contributors—we'd love to discuss any additions you'd like to make.

Finally, we're working on a new task format that doesn't depend on Grunt: it's called node-task. Once this is complete, there will be one more conversion, and then we'll never ask you to upgrade your plugins to support our changes again. Until that happens, thanks for bearing with us!

If you have any questions about how to proceed, please respond here, or join us in #grunt on irc.freenode.net.

Thanks, we really appreciate your work!

grunt-sass v0.2.2 seems to be broken -

Hi there, Ive been trying to use the latest grunt-sass but kept getting errors "module grunt-sass not found, is it installed", despite it being present in my node_modules folder. On closer inspection it looks like tasks/sass.js is missing in v0.2.2.

If I npm install from git://github.com/sindresorhus/grunt-sass.git#master it works as expected.

I do have to install grunt-lib-contrib aswell though - isnt that something that should be a dependency loaded as part of grunt-sass or is this just an artefact of me installing directly from git??

Cheers,
Greg

SourceComments

Is the ability to add the sourceComments (https://github.com/andrew/node-sass#sourcecomments) to the output on your roadmap?

Add imagePath to options

I would like to be able to point to a cdn in my css without setting the full path every time. This is supported in node-sass through the use of the imagePath variable. Right now grunt-sass doesn't seem to support the use of this variable.

How to 'watch' Sass files?

Hi,

Below is my Gruntfile (I'm using 0.4.0rc2 at the moment). I'm trying to 'watch' my Sass files so I don't have to manually run either grunt or grunt sass to compile changes in my Sass file. Can any one demonstrate in my below set-up how to do that?

Thanks.

module.exports = function (grunt) {

  /*
      Grunt set-up:
        npm install -g grunt-cli
        npm install -g grunt-init
        npm init

      Requirements: 
        npm install grunt@devel --save-dev
        npm install grunt-contrib-watch --save-dev
        npm install grunt-contrib-jshint --save-dev
            At time of testing I needed more up to date version of jshint: npm install https://github.com/gruntjs/grunt-contrib-jshint/archive/7fd70e86c5a8d489095fa81589d95dccb8eb3a46.tar.gz --save-dev
        npm install grunt-contrib-uglify --save-dev
        npm install grunt-contrib-requirejs --save-dev
        npm install grunt-contrib-sass --save-dev
        npm install grunt-contrib-imagemin --save-dev
        npm install grunt-contrib-htmlmin --save-dev

   */

  // Project configuration.
  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    jshint: {
      files: ['Gruntfile.js', 'app/**/*.js', '!app/release/**', 'modules/**/*.js'],
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        browser: true,

        globals: {
          module: true,
          require: true,
          requirejs: true,
          jQuery: true,
          console: true,
          define: true
        }
      }
    },

    watch: {
      files: '<%= jshint.files %> <%= sass.dev.files %>',
      tasks: 'default'
    },

    requirejs: {
      compile: {
        options: {
          baseUrl: './app',
          mainConfigFile: './app/main.js',
          dir: './app/release/',
          modules: [
            {
              name: 'main'
            }
          ]
        }
      }
    },

    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          './app/styles/main.css': './app/styles/sass/main.scss'
        }
      },
      dev: {
        options: {
          style: 'expanded'
        },
        files: {
          './app/styles/main.css': './app/styles/sass/main.scss'
        }
      }
    }

  });

  // Load NPM Tasks
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-requirejs');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-htmlmin');

  // Default Task
  grunt.registerTask('default', ['jshint', 'sass']);

  // Release Task
  grunt.registerTask('release', ['requirejs']);
};

Caching?

Is grunt-sass caching the compiled files?

Can't compile *.sass

It doesn't compile *.SASS files. Here a trace:

lenarakhmadeev@lenarakhmadeev-PC:~/dev/colt$ grunt sass
path.existsSync is now called `fs.existsSync`.
Running "sass:build" (sass) task
Uncompressed size: 18 bytes.

/usr/lib/node_modules/grunt/tasks/min.js:89
ompressed size: ' + gzipSize.green + ' bytes gzipped (' + String(min.length).g
                                                                    ^
TypeError: Cannot read property 'length' of undefined
    at Object.module.exports (/usr/lib/node_modules/grunt/tasks/min.js:89:93)
    at Task.helper (/usr/lib/node_modules/grunt/lib/util/task.js:117:19)
    at module.exports (/home/lenarakhmadeev/dev/colt/node_modules/grunt-sass/tasks/sass.js:22:10)

grunt.js look like:

...

    sass: {
        build: {
            src: 'app/css/lol.sass',
            dest: 'build/css/main.css'
        }
    },

...

Error reading values

Warning: <file_name>:383: error: error reading values after opacity
Use --force to continue.
Aborted due to warnings.
( https://github.com/jlong/sass-twitter-bootstrap/blob/master/lib/_mixins.scss#L383 )

Warning: <file_name>:419: error: error reading values after progid
Use --force to continue.
Aborted due to warnings.
( https://github.com/jlong/sass-twitter-bootstrap/blob/master/lib/_mixins.scss#L419 )
...

L429, #L447, #L458, #L479, #L522

error reading values after auto ( https://github.com/jlong/sass-twitter-bootstrap/blob/master/lib/_reset.scss#L82 )

error reading values after dotted ( https://github.com/jlong/sass-twitter-bootstrap/blob/master/lib/_forms.scss#L129 )

error reading values after 1px ( https://github.com/jlong/sass-twitter-bootstrap/blob/master/lib/_forms.scss#L139 )
...

L544, #L546

Grunt globbing pattern support

I was wondering if any support for blobbing patterns was forthcoming?

I'd like to be able to compile multiple .scss source files into multiple .css files.

Heads up: Libsass now supports sourcemaps

sass/libsass#122

sass/libsass@366bc11

Debugging info

Thanks for this project - very useful. Is there a way to compile css files with debugging info (i.e. passing --debug-info to sass) so that Firebug and the Chrome inspector can point to the original lines in the original file?

error when trying to compile .scss files in ubuntu 12.10

$ grunt sass
Loading "server.js" tasks and helpers...ERROR
>> Error: Cannot find module 'debug'

Running "sass:dist" (sass) task
Segmentation fault (core dumped)

getting this error when trying to compile .scss files.

here are the relevant parts of my grunt-file:

module.exports = function( grunt ) {
'use strict';

grunt.initConfig({
...
sass: {
    dist: {
        src: 'src/css/app.scss',
        dest: 'src/css/app.css'
    }
},
...
});
grunt.loadNpmTasks('grunt-sass');
};

Version 0.4.0 is empty in NPM's registry

It looks like the version 0.4.0 on npm is actually missing the tasks directory.

curl http://registry.npmjs.org/grunt-sass/-/grunt-sass-0.4.0.tgz | tar -ztvf -

Just shows two files, 'readme.md' and 'package.json'. Version 0.3.0 seems to be OK

curl http://registry.npmjs.org/grunt-sass/-/grunt-sass-0.3.0.tgz | tar -ztvf -

periodic error causing grunt watch to bomb out

Im using grunt watch to regen css when my sass changes which mostly works awesomely. Occasionally though I get an error (for no discernable reason) that causes watch to quit, meaning I have to restart it. While this isn't a show stopper - it is quite annoying! 😃

Im guessing the error (see below) is coming from node-sass and not grunt-sass - but would it be possible to wrap node-sass calls in a try/catch so an error can be displayed but the watch won't bomb out?

Cheers, Greg

Error seen;
node(14524,0x1017bb000) malloc: *** mmap(size=1152921504876556288) failed (error code=12)
*** error: can't allocate region
*** set a breakpoint in malloc_error_break to debug
terminate called throwing an exceptionAbort trap: 6

Grunt 0.4 support

Self-explanatory ;0

Problem with dependency Chalk

On the weekend I installed grunt-sass with no problem. After the latest commit I'm getting this error:

Error: No compatible version found: chalk@'^0.4.0' npm ERR! Valid install targets: npm ERR! ["0.1.0","0.1.1","0.2.0","0.2.1","0.3.0","0.4.0"] npm ERR! at installTargetsError (/usr/local/Cellar/node/0.10.12/lib/node_modules/npm/lib/cache.js:719:10) npm ERR! at /usr/local/Cellar/node/0.10.12/lib/node_modules/npm/lib/cache.js:641:10 npm ERR! at saved (/usr/local/Cellar/node/0.10.12/lib/node_modules/npm/node_modules/npm-registry-client/lib/get.js:138:7) npm ERR! at Object.oncomplete (fs.js:107:15)

Warning: source string:1: error: invalid top-level expression

When I run grunt sass, I receive the following error:

❯ grunt sass
Running "sass:dist" (sass) task
Warning: source string:1: error: invalid top-level expression
 Use --force to continue.

Aborted due to warnings.

This occurs even when my SCSS file has no contents.

Here is an isolated project which reproduces the error: http://cl.ly/2e0E1z3K322Y

I have a feeling this could be unique to my environment. If you have any pointers, that would be appreciated. The Node modules appeared to install with no problems.

Broken Selectors with silent classes

When extending silent classes from within another silent class, grunt-sass is producing bad selectors. grunt-contrib-sass generates correct selectors.

gist package that reproduces the issue here:
https://gist.github.com/jpdevries/6350682

this:

%visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

%focusable:active,
%focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    @extend %visuallyhidden;
}

#mydiv {
    @extend %visuallyhidden;
}

generates:

%focusable:active, %focusable:focus, #mydiv { /* bad selector generated by grunt-sass (grunt-contrib-sass works correclty) */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

Filter error

Hello,

Thanks a lot for this great tool ! It's sooo fast !

I have an error with filter property (thanks IE).

div
{
    -moz-opacity:.8;opacity:.80;filter:alpha(opacity=80)
}

returns error reading values after opacity

I have created a mixin to handle this for now, but if it could be fixed, it would be great !
Have a nice day.

sass-boostrap compilation fails

Something that succeeds in grunt-contrib-compass, fails in grunt-sass:

Warning: app/bower_components/sass-bootstrap/lib/mixins:712: error: invalid selector after ,

ln 708-712 in mixins:

@mixin make-lg-column-pull($columns) {
  @media (min-width: $screen-lg-min) {
    right: percentage(($columns / $grid-columns));
  }
}

Warning: source string:1: error: invalid top-level expression

Creating a new ticket based on #41 since it is probably a different error over non-graceful error handling.

In a standard Yeoman webapp layout, the following task fails:

        sass: {
            dist: {
                options: {
                    includePaths: ['<%= yeoman.app %>/styles', '<%= yeoman.app %>/bower_components'],
                    outputStyle: 'compressed'
                },
                files: {
                    'main.css': 'main.scss'
                }
            }
        }

Syntax error handling

I'm using grunt-sass with grunt-contrib-watch. If the compiler finds a syntax error inside the scss file, it throws a warning and blocks (not ends) the watch plugin.