sass version cleanup, added gulp task for sass build,

gulpfile.js

@@ -1,6 +1,6 @@
-// Assigning modules to local variables
 var gulp = require('gulp');
 var less = require('gulp-less');
+var sass = require('gulp-sass');
 var browserSync = require('browser-sync').create();
 var header = require('gulp-header');
 var cleanCSS = require('gulp-clean-css');
@@ -17,10 +17,7 @@ var banner = ['/*!\n',
     ''
 ].join('');
 
-// Default task
+// Compile LESS files from /less into /css
-gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']);
-
-// Less task to compile the less files and add the banner
 gulp.task('less', function() {
     return gulp.src('less/agency.less')
         .pipe(less())
@@ -31,7 +28,7 @@ gulp.task('less', function() {
         }))
 });
 
-// Minify CSS
+// Minify compiled CSS
 gulp.task('minify-css', ['less'], function() {
     return gulp.src('css/agency.css')
         .pipe(cleanCSS({ compatibility: 'ie8' }))
@@ -54,21 +51,15 @@ gulp.task('minify-js', function() {
         }))
 });
 
-// Copy Bootstrap core files from node_modules to vendor directory
+// Copy vendor libraries from /node_modules into /vendor
-gulp.task('bootstrap', function() {
+gulp.task('copy', function() {
-    return gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
+    gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
         .pipe(gulp.dest('vendor/bootstrap'))
-})
 
-// Copy jQuery core files from node_modules to vendor directory
+    gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
-gulp.task('jquery', function() {
-    return gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
         .pipe(gulp.dest('vendor/jquery'))
-})
 
-// Copy Font Awesome core files from node_modules to vendor directory
+    gulp.src([
-gulp.task('fontawesome', function() {
-    return gulp.src([
             'node_modules/font-awesome/**',
             '!node_modules/font-awesome/**/*.map',
             '!node_modules/font-awesome/.npmignore',
@@ -79,8 +70,8 @@ gulp.task('fontawesome', function() {
         .pipe(gulp.dest('vendor/font-awesome'))
 })
 
-// Copy all third party dependencies from node_modules to vendor directory
+// Run everything
-gulp.task('copy', ['bootstrap', 'jquery', 'fontawesome']);
+gulp.task('default', ['less', 'minify-css', 'minify-js', 'copy']);
 
 // Configure the browserSync task
 gulp.task('browserSync', function() {
@@ -92,7 +83,7 @@ gulp.task('browserSync', function() {
 })
 
 // Watch Task that compiles LESS and watches for HTML or JS changes and reloads with browserSync
-gulp.task('dev', ['browserSync', 'less', 'minify-css', 'minify-js'], function() {
+gulp.task('watch', ['browserSync', 'less', 'minify-css', 'minify-js'], function() {
     gulp.watch('less/*.less', ['less']);
     gulp.watch('css/*.css', ['minify-css']);
     gulp.watch('js/*.js', ['minify-js']);
@@ -100,3 +91,15 @@ gulp.task('dev', ['browserSync', 'less', 'minify-css', 'minify-js'], function()
     gulp.watch('*.html', browserSync.reload);
     gulp.watch('js/**/*.js', browserSync.reload);
 });
+
+// Compiles SCSS files from /scss into /css
+// NOTE: This theme uses LESS by default. To swtich to SCSS you will need to update this gulpfile by changing the 'less' tasks to run 'sass'!
+gulp.task('sass', function() {
+    return gulp.src('scss/agency.scss')
+        .pipe(sass())
+        .pipe(header(banner, { pkg: pkg }))
+        .pipe(gulp.dest('css'))
+        .pipe(browserSync.reload({
+            stream: true
+        }))
+});

package.json

@@ -17,6 +17,7 @@
     "gulp-header": "^1.8.7",
     "gulp-less": "^3.1.0",
     "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.3.2",
     "gulp-uglify": "^1.5.4",
     "jquery": "^1.11.3"
   },

scss/_mixins.scss

@@ -1,37 +1,51 @@
+// Mixins
+
 // Bootstrap Button Variant
 
 @mixin button-variant($color, $background, $border) {
   color: $color;
   background-color: $background;
   border-color: $border;
-  @at-root {
+
-    &.active,
+  &:focus,
-    &:active,
+  &.focus {
-    &:focus,
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 25%);
+  }
+  &:hover {
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 12%);
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 12%);
+
     &:hover,
-    .open .dropdown-toggle#{&} {
+    &:focus,
+    &.focus {
       color: $color;
-      background-color: darken($background, 10%);
+      background-color: darken($background, 17%);
-      border-color: darken($border, 12%);
+          border-color: darken($border, 25%);
     }
-
+  }
-    &.active,
+  &:active,
-    &:active,
+  &.active,
-    .open .dropdown-toggle#{&} {
+  .open > &.dropdown-toggle {
-      background-image: none;
+    background-image: none;
-    }
+  }
-
+  &.disabled,
-    &.disabled,
+  &[disabled],
-    &[disabled],
+  fieldset[disabled] & {
-    fieldset[disabled] #{&} {
+    &:hover,
-      &,
+    &:focus,
-      &.active,
+    &.focus {
-      &:active,
+      background-color: $background;
-      &:focus,
+          border-color: $border;
-      &:hover {
-        background-color: $background;
-        border-color: $border;
-      }
     }
   }
 
@@ -41,7 +55,7 @@
   }
 }
 
-// Background Features
+// Background Cover Mixin
 
 @mixin background-cover {
   -webkit-background-size: cover;
@@ -50,7 +64,7 @@
   -o-background-size: cover;
 }
 
-// Font Selections
+// Font Mixins
 
 @mixin serif-font {
   font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;

scss/_variables.scss

@@ -1,8 +1,13 @@
 // Variables
 
-$brand-primary: #fed136;
+// Gray and Brand Colors for use across theme
-$brand-danger: #e74c3c;
+
-$gray-darkest: #222;
+$theme-primary:    #fed136;
-$gray: #777;
+$theme-danger:     #e74c3c;
-$gray-lighter: #f7f7f7;
+
-$placeholder-text: #bbbbbb;
+$gray-base:			#000 !default;
+$gray-darker:		lighten($gray-base, 13.5%) !default; // #222
+$gray-dark:			lighten($gray-base, 20%) !default;   // #333
+$gray:				lighten($gray-base, 33.5%) !default; // #555
+$gray-light:		lighten($gray-base, 46.7%) !default; // #777
+$gray-lighter:		lighten($gray-base, 93.5%) !default; // #eee