created colors values shared between javascript and sass

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -8,14 +8,20 @@
 
 @import 'base/reset';
 @import 'base/colors';
+@import 'base/shared_variables';
 @import 'base/grid';
 @import 'base/layout';
 
 // header
 
+.layout-container{
+  pointer-events: none;
+}
+
 header[role="banner"]{
   padding:0 0 1em 0;
   border-bottom: 1px solid red;
+  pointer-events: all;
 }
 
 #block-edlptheme-branding{
@@ -96,10 +102,13 @@ header[role="banner"]{
 // main
 main[role="main"]{
   .layout-content{
+    pointer-events: none;
     .row{
+      pointer-events: none;
       height:100%;
       overflow: hidden;
       .col{
+        pointer-events:all;
         max-height: 100%;
         position: relative;
       }
@@ -112,8 +121,6 @@ main[role="main"]{
     }
   }
 }
-
-
 #agenda{
   pointer-events: auto;
   background-color: $transparent-bg;
@@ -146,8 +153,8 @@ main[role="main"]{
   }
 }
 
-
 // Footer
+
 @mixin oblique-list {
   display: inline-block;
   position: relative;
@@ -175,6 +182,7 @@ footer{
   >.region{
     display: table-cell;
     white-space: nowrap;
+    pointer-events: all;
     // outline: 1px dotted purple;
     // position: relative;
   }
@@ -309,61 +317,61 @@ footer{
 
         &[tid='134']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-134;background-color: $e-col-134;}}
+            border-color: $e_col_134;background-color: $e_col_134;}}
         &[tid='121']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-121;background-color: $e-col-121;}}
+            border-color: $e_col_121;background-color: $e_col_121;}}
         &[tid='125']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-125;background-color: $e-col-125;}}
+            border-color: $e_col_125;background-color: $e_col_125;}}
         &[tid='119']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-119;background-color: $e-col-119;}}
+            border-color: $e_col_119;background-color: $e_col_119;}}
         &[tid='132']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-132;background-color: $e-col-132;}}
+            border-color: $e_col_132;background-color: $e_col_132;}}
         &[tid='122']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-122;background-color: $e-col-122;}}
+            border-color: $e_col_122;background-color: $e_col_122;}}
         &[tid='129']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-129;background-color: $e-col-129;}}
+            border-color: $e_col_129;background-color: $e_col_129;}}
         &[tid='120']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-120;background-color: $e-col-120;}}
+            border-color: $e_col_120;background-color: $e_col_120;}}
         &[tid='130']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-130;background-color: $e-col-130;}}
+            border-color: $e_col_130;background-color: $e_col_130;}}
         &[tid='118']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-118;background-color: $e-col-118;}}
+            border-color: $e_col_118;background-color: $e_col_118;}}
         &[tid='127']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-127;background-color: $e-col-127;}}
+            border-color: $e_col_127;background-color: $e_col_127;}}
         &[tid='133']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-133;background-color: $e-col-133;}}
+            border-color: $e_col_133;background-color: $e_col_133;}}
         &[tid='128']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-128;background-color: $e-col-128;}}
+            border-color: $e_col_128;background-color: $e_col_128;}}
         &[tid='124']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-124;background-color: $e-col-124;}}
+            border-color: $e_col_124;background-color: $e_col_124;}}
         &[tid='116']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-116;background-color: $e-col-116;}}
+            border-color: $e_col_116;background-color: $e_col_116;}}
         &[tid='117']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-117;background-color: $e-col-117;}}
+            border-color: $e_col_117;background-color: $e_col_117;}}
         &[tid='131']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-131;background-color: $e-col-131;}}
+            border-color: $e_col_131;background-color: $e_col_131;}}
         &[tid='126']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-126;background-color: $e-col-126;}}
+            border-color: $e_col_126;background-color: $e_col_126;}}
         &[tid='123']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e-col-123;background-color: $e-col-123;}}
+            border-color: $e_col_123;background-color: $e_col_123;}}
 
         // &.highlighted{
         //   a.term_link{

sites/all/themes/custom/edlptheme/assets/styles/base/README.md

@@ -0,0 +1 @@
+# Do NOT EDIT _variables.scss as it is automaticly generated with gulp from assets/json/variables.json

sites/all/themes/custom/edlptheme/assets/styles/base/_colors.scss

@@ -1,23 +1 @@
 $transparent-bg: rgba(255,255,255, 0.9);
-
-$e-col-130: rgb(75, 143, 126);
-$e-col-121: rgb(134, 142, 36);
-$e-col-134: rgb(43, 143, 47);
-$e-col-121: rgb(58, 51, 182);
-$e-col-125: rgb(44, 159, 87);
-$e-col-119: rgb(196, 137, 120);
-$e-col-132: rgb(82, 112, 187);
-$e-col-122: rgb(251, 84, 211);
-$e-col-129: rgb(224, 116, 131);
-$e-col-120: rgb(101, 88, 69);
-$e-col-130: rgb(126, 8, 104);
-$e-col-118: rgb(14, 113, 33);
-$e-col-127: rgb(218, 189, 66);
-$e-col-133: rgb(3, 153, 187);
-$e-col-128: rgb(57, 154, 28);
-$e-col-124: rgb(112, 133, 64);
-$e-col-116: rgb(25, 27, 255);
-$e-col-117: rgb(39, 157, 132);
-$e-col-131: rgb(82, 25, 171);
-$e-col-126: rgb(212, 156, 182);
-$e-col-123: rgb(73, 119, 21);

sites/all/themes/custom/edlptheme/assets/styles/base/_shared_variables.scss

@@ -0,0 +1,19 @@
+$e_col_130: rgb(126, 8, 104);
+$e_col_121: rgb(58, 51, 182);
+$e_col_134: rgb(43, 143, 47);
+$e_col_125: rgb(44, 159, 87);
+$e_col_119: rgb(196, 137, 120);
+$e_col_132: rgb(82, 112, 187);
+$e_col_122: rgb(251, 84, 211);
+$e_col_129: rgb(224, 116, 131);
+$e_col_120: rgb(101, 88, 69);
+$e_col_118: rgb(14, 113, 33);
+$e_col_127: rgb(218, 189, 66);
+$e_col_133: rgb(3, 153, 187);
+$e_col_128: rgb(57, 154, 28);
+$e_col_124: rgb(112, 133, 64);
+$e_col_116: rgb(25, 27, 255);
+$e_col_117: rgb(39, 157, 132);
+$e_col_131: rgb(82, 25, 171);
+$e_col_126: rgb(212, 156, 182);
+$e_col_123: rgb(73, 119, 21);