Move variables in its own file with !default

src/styles/scss/_gjs_canvas.scss

@@ -117,8 +117,6 @@
   background-color: navy;
 }
 
-$hndlMargin: -5px;
-
 .#{$app-prefix}resizer-h {
   pointer-events: all;
   position: absolute;

src/styles/scss/_gjs_inputs.scss

@@ -1,9 +1,4 @@
 /********* Input style **********/
-$inputFontColor: $mainLhlColor; /* #d5d5d5 */
-$arrowColor: $mainLhlColor; /* b1b1b1 */
-$darkTextShadow: $mainDkColor; /* #252525 */
-$darkBorder: rgba(0, 0, 0, 0.15); /* 303030 */
-$colorpSize: 22px;
 
 @mixin rangeThumbStyle() {
   height: 10px;

src/styles/scss/_gjs_variables.scss

@@ -0,0 +1,77 @@
+
+
+/* Class names prefixes */
+
+$app-prefix: 	'gjs-' !default;
+$nv-prefix: 	$app-prefix + 'nv-' !default;
+$rte-prefix: 	$app-prefix + 'rte-' !default;
+$comp-prefix: $app-prefix + 'comp-' !default;
+$mdl-prefix: 	$app-prefix + 'mdl-' !default;
+$am-prefix: 	$app-prefix + 'am-' !default;
+$cm-prefix: 	$app-prefix + 'cm-' !default;
+$pn-prefix: 	$app-prefix + 'pn-' !default;
+$com-prefix: 	$app-prefix + 'com-' !default;
+$sm-prefix: 	$app-prefix + 'sm-' !default;
+$cv-prefix: 	$app-prefix + 'cv-' !default;
+$clm-prefix: 	$app-prefix + 'clm-' !default;
+$trt-prefix: 	$app-prefix + 'trt-' !default;
+
+
+/* Colors / Theme */
+
+
+/* Dark theme */
+$mainColor:		#444 !default; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */
+$fontColor:   #ddd !default; /* l: #d8d7db */
+$fontColorActive: #f8f8f8 !default;
+
+/* Light theme
+$mainColor: #fff;
+$fontColor: #9299a3;
+$fontColorActive: #4f8ef7;
+*/
+
+$mainDkColor:	rgba(0, 0, 0, 0.3) !default;/* darken($mainColor, 4%) - #383838 */
+$mainDklColor: rgba(0, 0, 0, 0.1) !default;
+$mainLhColor:	rgba(255, 255, 255, 0.1) !default; /* #515151 */
+$mainLhlColor: rgba(255, 255, 255, 0.7) !default;
+$fontColorDk:	#777 !default;
+$mainFont:		Helvetica, sans-serif !default;
+$colorBlue:		#3b97e3 !default;
+$colorRed: 		#dd3636 !default;
+$colorYell:		#ffca6f !default;
+$colorGreen:	#62c462 !default;
+$tagBg: #804f7b !default;
+$secColor: $tagBg !default;
+$imageCompDim:	50px !default;
+$leftWidth: 15% !default;
+
+/* Color Helpers */
+$colorHighlight: #71b7f1 !default;
+$colorWarn: #ffca6f !default;
+
+/* Canvas */
+$hndlMargin: -5px !default;
+
+/* Components / Inputs */
+$lightBorder: rgba(255, 255, 255, 0.05) !default;
+$inputFontColor: $mainLhlColor !default; /* #d5d5d5 */
+$arrowColor: $mainLhlColor !default; /* b1b1b1 */
+$darkTextShadow: $mainDkColor !default; /* #252525 */
+$darkBorder: rgba(0, 0, 0, 0.15) !default; /* 303030 */
+$colorpSize: 22px !default;
+
+/* Class manager */
+$addBtnBg: lighten($mainDkColor, 10%) !default;
+$paddElClm: 5px 6px !default;
+
+/* File uploader */
+$uploadPadding:	150px 10px !default;
+
+/* Commands */
+$animSpeed: 0.2s !default;
+
+/* Fonts */
+$fontPath: '../fonts' !default;
+$fontName: 'main-fonts' !default;
+$fontV: 20 !default;//random(1000)

src/styles/scss/main.scss

@@ -4,49 +4,9 @@
 @import "node_modules/codemirror/lib/codemirror";
 @import "node_modules/codemirror/theme/hopscotch";
 
-$app-prefix: 	'gjs-';
-$nv-prefix: 	$app-prefix + 'nv-';
-$rte-prefix: 	$app-prefix + 'rte-';
-$comp-prefix: $app-prefix + 'comp-';
-$mdl-prefix: 	$app-prefix + 'mdl-';
-$am-prefix: 	$app-prefix + 'am-';
-$cm-prefix: 	$app-prefix + 'cm-';
-$pn-prefix: 	$app-prefix + 'pn-';
-$com-prefix: 	$app-prefix + 'com-';
-$sm-prefix: 	$app-prefix + 'sm-';
-$cv-prefix: 	$app-prefix + 'cv-';
-$clm-prefix: 	$app-prefix + 'clm-';
-$trt-prefix: 	$app-prefix + 'trt-';
-
-/* Dark theme */
-$mainColor:		#444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */
-$fontColor:   #ddd; /* l: #d8d7db */
-$fontColorActive: #f8f8f8;
-
-/* Light theme
-$mainColor: #fff;
-$fontColor: #9299a3;
-$fontColorActive: #4f8ef7;
-*/
 
-$mainDkColor:	rgba(0, 0, 0, 0.3);/* darken($mainColor, 4%) - #383838 */
+@import "gjs_variables.scss";
-$mainDklColor: rgba(0, 0, 0, 0.1);
+
-$mainLhColor:	rgba(255, 255, 255, 0.1); /* #515151 */
-$mainLhlColor: rgba(255, 255, 255, 0.7);
-$fontColorDk:	#777;
-$mainFont:		Helvetica, sans-serif;
-$colorBlue:		#3b97e3;
-$colorRed: 		#dd3636;
-$colorYell:		#ffca6f;
-$colorGreen:	#62c462;
-$tagBg: #804f7b;
-$secColor: $tagBg;
-$imageCompDim:	50px;
-$leftWidth: 15%;
-
-$fontPath: '../fonts';
-$fontName: 'main-fonts';
-$fontV: 20;//random(1000)
 
 @font-face {
   font-family: 'font3336';
@@ -88,9 +48,6 @@ $fontV: 20;//random(1000)
   transform: $v;
 }
 
-/* Color Helpers */
-$colorHighlight: #71b7f1;
-$colorWarn: #ffca6f;
 
 .#{$app-prefix}bg {
   &-main {
@@ -417,8 +374,6 @@ ol.example li.placeholder:before {position: absolute;}
   display: none;
 }
 
-$animSpeed: 0.2s;
-
 .#{$app-prefix}placeholder,
 .#{$nv-prefix}placeholder {
   border-style: solid !important;
@@ -555,7 +510,8 @@ $animSpeed: 0.2s;
 	display:	block;
 	background-color: #f5f5f5;
 	color: 	$fontColorDk;
-	height: $imageCompDim; width: $imageCompDim;
+  height: $imageCompDim;
+  width: $imageCompDim;
 	line-height: $imageCompDim;
 	outline: 3px solid $colorYell;
 	outline-offset: -3px;
@@ -568,7 +524,6 @@ $animSpeed: 0.2s;
 	}
 }
 
-$lightBorder: rgba(255, 255, 255, 0.05);
 
 @import "gjs_inputs";
 
@@ -637,8 +592,6 @@ $lightBorder: rgba(255, 255, 255, 0.05);
 @import "gjs_layers";
 
 /********* Class manager **********/
-$addBtnBg: lighten($mainDkColor, 10%);
-$paddElClm: 5px 6px;
 
 .#{$clm-prefix}field{
 		@extend .#{$sm-prefix}field
@@ -799,8 +752,6 @@ $paddElClm: 5px 6px;
 
 /********* File uploader **********/
 
-$uploadPadding:	150px 10px;
-
 .#{$am-prefix}file-uploader {
 	width: 55%;
 	float:left;