gulp compass issue

[ Moderator note: moved to Fixing WordPress. ]

I am using Gulp to compile sass and trying to incorporate gulp-compass plugin.
When I start the task by writing ‘gulp’ on the command line, the webpage loads. But when I make changes to .scss files and the gulp-compass watch task runs, it throws an error.

Individual stylesheets must be in the sass directory.

[12:51:41] { [Error: Compass failed]
  message: 'Compass failed',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-compass',
  __safety: { toString: [Function: bound ] } }

This is my gulpfile.js
Gulpfile.js
var themename = ‘starter-theme’;

var gulp = require(‘gulp’),
// Prepare and optimize code etc
//autoprefixer = require(‘autoprefixer’),
browserSync = require(‘browser-sync’).create(),
compass = require(‘gulp-compass’),
image = require(‘gulp-image’),
jshint = require(‘gulp-jshint’),
gutil = require(‘gulp-util’),
//postcss = require(‘gulp-postcss’),
sass = require(‘gulp-sass’),
sourcemaps = require(‘gulp-sourcemaps’),

// Only work with new or updated files
newer = require(‘gulp-newer’),

// Name of working theme folder
root = ‘../’ + themename + ‘/’,
scss = root + ‘sass/’,
sassSources = scss + ‘style.scss’,
js = root + ‘js/’,
img = root + ‘images/’,
languages = root + ‘languages/’;
sassStyle = ‘expanded’;

// Start the gulp-compass task
gulp.task(‘compass’, function() {
gulp.src(sassSources)
.pipe(compass({
sass: scss,
css: root,
style: sassStyle,
require: [‘susy’, ‘breakpoint’]
})
.on(‘error’, gutil.log))
.pipe(gulp.dest(root));
});

// Optimize images through gulp-image
gulp.task(‘images’, function() {
return gulp.src(img + ‘RAW/**/*.{jpg,JPG,png}’)
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});

// JavaScript
gulp.task(‘javascript’, function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter(‘default’))
.pipe(gulp.dest(js));
});

// Watch everything
gulp.task(‘watch’, function() {
browserSync.init({
open: ‘external’,
proxy: ‘localhost’,
port: 8080
});
gulp.watch([root + ‘**/*.css’, root + ‘**/*.scss’ ], [‘compass’]);
gulp.watch(js + ‘**/*.js’, [‘javascript’]);
gulp.watch(img + ‘RAW/**/*.{jpg,JPG,png}’, [‘images’]);
gulp.watch(root + ‘**/*’).on(‘change’, browserSync.reload);
});

// Default task (runs at initiation: gulp –verbose)
gulp.task(‘default’, [‘watch’]);

I am using these versions
Gulp: CLI version 3.9.1
Local version 3.9.1
gulp-compass: ^2.1.0

I have read many articles online to resolve this issue, but they don’t seem to work.
This is the screenshot of my folder structure:
WordPress theme dtructure