[gulp-sass] no mixin named red

base.scss

// Helpers
@import 'helpers/variables';
@import 'helpers/mixins';

button.scss

.button {
  @include red;
}

Directory structure

# src/base/scss/
- base.scss
- helpers/
  - mixins.scss
  - variables.scss
 
# src/components/button/
- button.scss  

gulpfile.js

'use strict';

var gulp = require('gulp');

var assemble = require('fabricator-assemble');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var concat = require('gulp-concat');
var csso = require('gulp-csso');
var del = require('del');
var gutil = require('gulp-util');
var imagemin = require('gulp-imagemin');
var jscs = require('gulp-jscs');
var jshint = require('gulp-jshint');
var order = require('gulp-order');
var plumber = require('gulp-plumber');
var pxtorem = require('gulp-pxtorem');
var reload = browserSync.reload;
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var symlink = require('gulp-sym');

// File-type globs
var globFabricatorScss = [
  './src/fabricator/scss/fabricator.scss'
];

var globFabricatorJs = [
  './src/fabricator/js/*.js'
];

var globScss = [
  './src/base/scss/base.scss',
  './src/components/**/*.scss'
];

var globJs = [
  './src/base/js/**/*.js',
  './src/components/**/*.js'
];

var globImg = [
  'src/base/img/**/*'
];

// Fabricator assemble
gulp.task('assemble', function(done) {
  assemble({
    keys: {
      materials: 'components'
    },
    layout: 'default',
    layouts: 'src/layouts/*',
    layoutIncludes: 'src/layouts/includes/*',
    views: 'src/views/**/*',
    materials: 'src/components/**/*.html',
    data: 'src/data/**/*.json',
    docs: 'docs/**/*.md',
    dest: 'dist'
  });
  done();
});

// Remove /dist for a clean build
gulp.task('clean', function(cb) {
  del('dist', cb);
});

// Install git hooks...
// Pre-commit hook (`$ gulp js`)
gulp.task('hooks', function() {
  return gulp.src(['.git-hooks/pre-commit'])
    .pipe(symlink(['.git/hooks/pre-commit'], {
      relative: true,
      force: true
    }));
});

// Styles (Fabricator)
gulp.task('styles:fabricator', function() {
  return gulp.src(globFabricatorScss)
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(autoprefixer('last 1 version'))
    .pipe(csso())
    .pipe(concat('fabricator.css'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(reload({
      stream: true
    }));
});

// Styles (Global)
gulp.task('styles:global', function() {
  return gulp.src(globScss)
    // .pipe(order([
    //   'src/base/scss/base.scss',
    //   'src/base/scss/**/*.scss',
    //   'src/components/**/*.scss'
    // ]))
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(autoprefixer({
      browsers: 'last 1 version'
    }))
    .pipe(pxtorem({
      replace: false
    }))
    //.pipe(csso())
    .pipe(concat('global.css'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(reload({
      stream: true
    }));
});

gulp.task('styles', ['styles:fabricator', 'styles:global']);

// Scripts (Fabricator)
gulp.task('scripts:fabricator', function() {
  return gulp.src(globFabricatorJs)
    .pipe(concat('fabricator.js'))
    .pipe(gulp.dest('dist/assets/js'));
});

// Scripts (Global)
gulp.task('scripts:global', function() {
  return gulp.src(globJs)
    .pipe(plumber())
    // .pipe(jscs())
    // .pipe(jshint())
    // .pipe(jshint.reporter('jshint-stylish'))
    .pipe(concat('global.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .on('error', function() {
      gutil.log('Invalid JS');
    });
});

gulp.task('scripts', ['scripts:fabricator', 'scripts:global']);

// Images
gulp.task('images', function() {
  return gulp.src(globImg)
    .pipe(imagemin())
    .pipe(gulp.dest('dist/assets/img'));
});

// Server
gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: 'dist'
    },
    notify: false,
    logPrefix: 'FABRICATOR'
  });

  gulp.task('assemble:watch', ['assemble'], reload);
  gulp.watch('src/**/*.{html,md,json}', ['assemble:watch']);

  gulp.task('styles:fabricator:watch', ['styles:fabricator'], reload);
  gulp.watch(globFabricatorScss, ['styles:fabricator:watch']);

  gulp.task('scripts:fabricator:watch', ['scripts:fabricator'], reload);
  gulp.watch(globFabricatorJs, ['scripts:fabricator:watch']);

  gulp.task('styles:global:watch', ['styles:global'], reload);
  gulp.watch(globScss, ['styles:global:watch']);

  gulp.task('scripts:global:watch', ['scripts:global'], reload);
  gulp.watch(globJs, ['scripts:global:watch']);

  gulp.task('images:watch', ['images'], reload);
  gulp.watch(globImg, ['images:watch']);
});

// Default build task
gulp.task('default', ['clean'], function() {

  // Define build tasks
  var tasks = [
    'styles',
    'scripts',
    'images',
    'assemble'
  ];

  // Run build
  runSequence(tasks, function() {
    gulp.start('serve');
  });
});

mixins.scss

/* Mixins */
@mixin red {
    color: red;
    outline: 10px solid red;
}