diff --git a/assets/skins/_variables.scss b/assets/skins/_variables.scss
new file mode 100644
index 0000000..351c76b
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/assets/skins/simplecircle.css b/assets/skins/simplecircle.css
deleted file mode 100644
index c722df5..0000000
--- a/assets/skins/simplecircle.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.loader-bg {
-  border-color: rgba(255,255,255,0.4);
-  box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.6);
-}
-.text {
-  color: rgb(135, 206, 235) !important;
-  font-weight: bold;
-}
-.loader-spinner {
-  border-color: rgb(135, 206, 235);
-}
\ No newline at end of file
diff --git a/assets/skins/simplecircle.scss b/assets/skins/simplecircle.scss
new file mode 100644
index 0000000..4f7be5d
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/dist/skins/simplecircle.css b/dist/skins/simplecircle.css
index 655ddbd..b15b5f5 100644
--- a/dist/skins/simplecircle.css
+++ b/dist/skins/simplecircle.css
@@ -1 +1 @@
-.loader-bg{border-color:rgba(255,255,255,.4);box-shadow:2px 2px 20px 0 rgba(0,0,0,.6)}.text{color:#87ceeb!important;font-weight:700}.loader-spinner{border-color:#87ceeb}
\ No newline at end of file
+.loader-bg{border-color:rgba(255,255,255,.4);-webkit-box-shadow:2px 2px 20px 0 rgba(0,0,0,.6);box-shadow:2px 2px 20px 0 rgba(0,0,0,.6)}.text{color:#87ceeb!important;font-weight:700}.loader-spinner{border-color:#87ceeb}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index d45fc01..3daef80 100644
--- a/gulpfile.js
+++ b/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,6 +27,16 @@ 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'])
@@ -33,7 +44,7 @@ gulp.task('scripts', function() {
     .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({