diff --git a/gulpfile.js b/gulpfile.js
index e65e78d1..7b6fa5e8 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,5 +1,14 @@
-var gulp = require('gulp');
-var browserSync = require('browser-sync').create();
+var gulp = require('gulp'),
+    browserSync = require('browser-sync').create(),
+    args = require('yargs').argv,
+    gulpif = require('gulp-if'),
+    sass = require('gulp-sass'),
+    sourcemaps = require('gulp-sourcemaps');
+
+var paths = {
+  sassAll: 'sass/**/*.scss',
+  cssDest: 'css'
+}
 
 gulp.task('serve', function() {
   browserSync.init({
@@ -10,3 +19,17 @@ gulp.task('serve', function() {
 
   gulp.watch(['*.html', '*.css', '*.js']).on('change', browserSync.reload);
 });
+
+gulp.task('sass', function() {
+  return gulp.src(paths.sassAll)
+  .pipe(gulpif(args.debug, sourcemaps.init()))
+  .pipe(sass().on('error', sass.logError))
+  .pipe(gulpif(args.debug, sourcemaps.write()))
+  .pipe(gulp.dest(paths.cssDest));
+});
+
+gulp.task('watch', function() {
+  gulp.watch(paths.sassAll, ['sass']);
+});
+
+gulp.task('default', ['sass']);
diff --git a/package.json b/package.json
index a5bd5dfb..411f20da 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,10 @@
   "name": "agent-mockup",
   "dependencies": {
     "browser-sync": "^2.11.0",
-    "gulp": "^3.9.0"
+    "gulp": "^3.9.0",
+    "gulp-if": "^2.0.0",
+    "gulp-sass": "^2.2.0",
+    "gulp-sourcemaps": "^1.6.0",
+    "yargs": "^4.2.0"
   }
 }