Grunt: node-bourbon syntax error when used with grunt-contrib-sass

Question

I am getting the following error when trying to use node-bourbon with grunt-contrib-sass.

Syntax error: Properties are only allowed within rules, directives, mixin includes, or other properties. on line 14 of sass/bourbon/addons/_prefixer.scss from line 6 of sass/style.scss

It is complaining about this syntax (specifically, the -webkit piece):

@if $prefix-for-webkit {
    -webkit-#{$prop}: $value;
}

Has anyone run into this? I am really hoping to not have to stop using Bourbon in order to use Grunt.

Please let me know if you need any further info.

Thanks, Paul

Answer 1

node-bourbon is using grunt-sass rather than grunt-contrib-sass.

Answer 2

That Sass error typically means a property (e.g. -webkit-box-sizing, font-family) is being used outside of a declaration block. In your case it is likely a mixin that is not inside a declaration block. Here are a some examples of what I mean:

/* error */
-webkit-box-sizing: border-box;

/* error */
@include prefixer(box-sizing, border-box, webkit moz spec);

/* all good */
div {
  -webkit-box-sizing: border-box;
}

/* all good */
div {
  @include prefixer(box-sizing, border-box, webkit moz spec);
}