Adding SCSS compilation and simple variables partial

assets/skins/_variables.scss

@@ -0,0 +1,4 @@
+$primary-color: rgb(135, 206, 235);
+
+$border-color: rgba(255, 255, 255, 0.4);
+$box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.6);

assets/skins/simplecircle.scss

@@ -0,0 +1,13 @@
+@import './variables';
+
+.loader-bg {
+  border-color: $border-color;
+  box-shadow: $box-shadow;
+}
+.text {
+  color: $primary-color !important;
+  font-weight: bold;
+}
+.loader-spinner {
+  border-color: $primary-color;
+}

gulpfile.js

@@ -1,10 +1,11 @@
-require('es6-promise').polyfill();
+//require('es6-promise').polyfill();
 var gulp = require('gulp');
-var jshint = require('gulp-jshint');
+//var jshint = require('gulp-jshint');
 var autoprefix = require('gulp-autoprefixer');
 var minifyCSS = require('gulp-minify-css');
 var stripDebug = require('gulp-strip-debug');
 var uglify = require('gulp-uglify');
+var sass = require('gulp-sass');
 
 gulp.task('lint', function() {
   return gulp.src(['./assets/*.js','!./assets/jquery.min.js'])
@@ -26,14 +27,24 @@ gulp.task('skins', function() {
     .pipe(minifyCSS())
     .pipe(gulp.dest('./dist/skins'));
 });
+
+// SCSS Compilation for Skins
+gulp.task('scss', function() {
+  gulp.src(['./assets/skins/*.scss'])
+    .pipe(sass().on('error', sass.logError))
+    .pipe(autoprefix('last 2 versions'))
+    .pipe(minifyCSS())
+    .pipe(gulp.dest('./dist/skins'));
+});
+
 // JS concat, strip debugging and minify
 gulp.task('scripts', function() {
   gulp.src(['./assets/*.js'])
     .pipe(stripDebug())
     .pipe(uglify())
     .pipe(gulp.dest('./dist'));
 });
-var bs = require('browser-sync').create(); // create a browser sync instance.
+//var bs = require('browser-sync').create(); // create a browser sync instance.
 
 gulp.task('browser-sync', function() {
     bs.init({