SASS Setup with Gulp or Grunt

_extends.scss

// Use extend when you want to share the same code between multiple elements
// The % means it won’t get printed to the stylesheet unless extended
%block {
  width: 100px;
  height: 100px;
  border: 2px solid;
  display: inline-block;
}

_footer.scss

//This is a partial that we import into `main`
@import 'mixins';
@import 'extends';

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  border: 3px solid gray;
  @include border-radius(10px);

  // nested child of footer
  h4 {
    color: #1D9833;
  }

  .block-awesome {
    @extend %block;
    background-color: green;
  }
  .block-danger {
    @extend %block;
    background-color: red;
  }
  .block-caution {
    @extend %block;
    background-color: yellow;
  }
  .block-disabled {
    @extend %block;
    background-color: LightGrey;
  }
}

_mixins.scss

// Use a mixin when you want to share similar code with different args
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Gruntfile.js

// *************************************************
// ** Remember to npm install grunt-contrib-sass` **
// *************************************************

module.exports = function(grunt) {

  grunt.initConfig({
    browserify: {
      '../dist/app.js': ['../js/quiz.js']
    },
    jshint: {
      options: {
        predef: [ "document", "console" ],
        esnext: true,
        globalstrict: true,
        globals: {"CarLot": true},
        browserify: true
      },
      files: ['../js/**/*.js']
    },
    sass: {
      dist: {
        files: {
          '../css/main.css': '../sass/main.scss'
        }
      }
    },
    watch: {
      javascripts: {
        files: ['../js/**/*.js'],
        tasks: ['jshint', 'browserify']
      },
      sass: {
        files: ['../sass/**/*.scss'],
        tasks: ['sass']
      }
    }
  });

  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  grunt.registerTask('default', ['jshint', 'sass', 'browserify', 'watch']);
};

gulpfile.js

var gulp = require('gulp');
var watch = require('gulp-watch');
// Remember to install this with npm install gulp-sass --save-dev
// Read about it at https://www.npmjs.com/package/gulp-sass
var sass = require('gulp-sass');

gulp.task('default', ['sassify', 'watch']); //<-- Add your sassify task to the default tasks list

gulp.task('watch', function() {
  //Add the sassify task you create below to the watch task. To add it to a watch that's also running jshint
  // you can do this:  gulp.watch(['./javascripts/**/*.js', './sass/**/*.scss' ], ['lint', 'sassify']);
  gulp.watch('./sass/**/*.scss', ['sassify']); 
});

// This is the task for compiling the SASS to CSS. 
// Make sure you setup a sass folder to write your SASS files in 
// and a css folder for the compiled CSS to be generated in
gulp.task('sassify', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

main.scss

// Pulls in the footer partial. Note no need for underscore or the file extension
@import 'footer';

// Defines a variable you can use anywhere in this file.
// If you want a variable available everywhere, you can set up
// a `variables` partial and then import it where you need it
$awesome-color: LightSteelBlue;

.inventory-cards {
  display: flex;
  justify-content: center;
  border: 5px solid $awesome-color;
}

.card-wrapper {
  width: 30%;
  float: left;
  text-align: center;
  position: relative;
  // Works even though we're importing this mixin via the footer partial
  @include border-radius(8px);
}

.is-clicked {
  border-width: 5px !important;
  background-color: $awesome-color;
}