Gulp-Sass & Node-Neat: Bourbon mixins failing

[mark-schaal]

I believe I saw something similar to this in the source repository for Bourbon, but with gulp-sass-^2.0.4 and node-neat-^1.7.2, any time I use a Bourbon mixin containing ampersands the script seems to do something wonky with ampersand characters.

For example, in my .scss:

body,html{
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    @include linear-gradient(#1e5799, #2989d8);
}

is being output as the following in the .css file:

body, html {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #1e5799;
  background-image: -webkit-linear-gradient(#1e5799, #2989d8);
  background-image: linear-gradient(#1e5799, #2989d8, , , , , , , , ); }

Any advice or insight would be huge.

Sidebar: My Gulp file looks like the following (I disabled auto-prefixer to make sure this wasn't causing the issue with the browser variant outputs):

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var livereload = require('gulp-livereload');
var neat = require('node-neat').includePaths;

var paths = {
  scss: './sass/*.scss',
};

console.log("Bourbon/Neat Paths:", [paths.scss].concat(neat));

gulp.task('sass:prod', function () {
  gulp.src(paths.scss)
    .pipe(sass().on('error', sass.logError))
    // .pipe(autoprefixer({
    //    browsers: ['last 2 version']
    // }))
    .pipe(gulp.dest('./css'));

});

gulp.task('sass:dev', function () {
  gulp.src(paths.scss)
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [paths.scss].concat(neat)
    }).on('error', sass.logError))
    // .pipe(autoprefixer({
    //   browsers: ['last 2 version']
    // }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./css'))
    .pipe(livereload());
});

gulp.task('sass:watch', function () {
  livereload.listen(35729);
  gulp.watch('./sass/**/*.scss', ['sass:dev']);
});

gulp.task('default', ['sass:dev', 'sass:watch']);

[danhernandez]

@mark-schaal, I'm having the exact same issue. Seems to be an issue with lib-sass from what i can tell.

I found a temporary work around here:thoughtbot/bourbon#729

Basically use the background-image mixin, but you'll just need to provided a fallback colour.
@include background-image(linear-gradient(to top, #00ff00, #ff0000));

If anyone else is having this issue, hope that helps!

Cheers