[REF] *: convert less content to scss content

Convert content so that the assets compile on app installation. The
style is still broken after this as the variables/mixins/... are not
defined in the right order (as it did not matter in LESS but does in
SCSS).

This commit basically changes:
- Variables: @​var_hello -> $var-hello
- Mixins: .mixin_world() {} -> @​mixin mixin-world {}
- Classes used as mixin: .my_class() -> @​extend .my_class
    - Here there were no other solution than to convert the use of
      a mixin call by the use of an extend as a first approximation
- LESS functions -> SCSS functions (e.g. fade -> rgba)
- Move first variable definition before the variable is used
    - Still need to make sure last variable definition is at the
      right place

9 files changed, 236 insertions, 236 deletions

diff --git a/addons/theme_default/static/src/scss/colors.scss b/addons/theme_default/static/src/scss/colors.scss
index fbfa3d35269..e893f5de84e 100644
--- a/addons/theme_default/static/src/scss/colors.scss
+++ b/addons/theme_default/static/src/scss/colors.scss
@@ -1,95 +1,95 @@
 /* Clean Colors */
 
-@color-blue: #3498DB;
-@color-turquoise: #1ABC9C;
-@color-green: #2ECC71;
-@color-yellow: #F1C40F;
-@color-orange: #E67E22;
-@color-red: #E74C3C;
-@color-pink: #f74b94;
-@color-purple: #9B59B6;
-@color-brown: #7b5844;  
-
-@color-blue-dark: #2980B9;
-@color-turquoise-dark: #16A085;
-@color-green-dark: #27AE60;
-@color-yellow-dark: #f3ac12;
-@color-orange-dark: #D35400;
-@color-red-dark: #C0392B;
-@color-pink-dark: #ea3884;
-@color-purple-dark: #8E44AD;
-@color-brown-dark: #604434;
-
-@color-blue-light: lighten(@color-blue, 20%);
-@color-turquoise-light: lighten(@color-turquoise, 20%);
-@color-green-light: lighten(@color-green, 20%);
-@color-yellow-light: lighten(@color-yellow, 20%);
-@color-orange-light: lighten(@color-orange, 20%);
-@color-red-light: lighten(@color-red, 20%);
-@color-pink-light: lighten(@color-pink, 20%);
-@color-purple-light: lighten(@color-purple, 20%);
-@color-brown-light: lighten(@color-brown, 20%);
-
-@color-clouds: #ECF0F1;
-@color-silver: #BDC3C7;
-@color-concrete: #95A5A6;
-@color-stone: #7F8C8D;
-@color-asphalt: #34495E;
-@color-midnight: #2C3E50;  
-
-
-@color-concrete-dark: #445b5c;
+$color-blue: #3498DB;
+$color-turquoise: #1ABC9C;
+$color-green: #2ECC71;
+$color-yellow: #F1C40F;
+$color-orange: #E67E22;
+$color-red: #E74C3C;
+$color-pink: #f74b94;
+$color-purple: #9B59B6;
+$color-brown: #7b5844;  
+
+$color-blue-dark: #2980B9;
+$color-turquoise-dark: #16A085;
+$color-green-dark: #27AE60;
+$color-yellow-dark: #f3ac12;
+$color-orange-dark: #D35400;
+$color-red-dark: #C0392B;
+$color-pink-dark: #ea3884;
+$color-purple-dark: #8E44AD;
+$color-brown-dark: #604434;
+
+$color-blue-light: lighten($color-blue, 20%);
+$color-turquoise-light: lighten($color-turquoise, 20%);
+$color-green-light: lighten($color-green, 20%);
+$color-yellow-light: lighten($color-yellow, 20%);
+$color-orange-light: lighten($color-orange, 20%);
+$color-red-light: lighten($color-red, 20%);
+$color-pink-light: lighten($color-pink, 20%);
+$color-purple-light: lighten($color-purple, 20%);
+$color-brown-light: lighten($color-brown, 20%);
+
+$color-clouds: #ECF0F1;
+$color-silver: #BDC3C7;
+$color-concrete: #95A5A6;
+$color-stone: #7F8C8D;
+$color-asphalt: #34495E;
+$color-midnight: #2C3E50;  
+
+
+$color-concrete-dark: #445b5c;
 
 /* +++++ NEW COLORS +++++ */ 
 
-@color-wind: #f7f7f7;
-@color-clay: #e1dcd5; 
-@color-sand: #c5bcb1;
-@color-beach: #f3bf91;
-@color-forest: #254c3a;
-@color-twilight: #3b2c50;
-@color-burgundy: #8e362d;
-@color-marine: #212d3a;
+$color-wind: #f7f7f7;
+$color-clay: #e1dcd5; 
+$color-sand: #c5bcb1;
+$color-beach: #f3bf91;
+$color-forest: #254c3a;
+$color-twilight: #3b2c50;
+$color-burgundy: #8e362d;
+$color-marine: #212d3a;
 
 /* GRAYS --------------------------------------------------------- */ 
 
-@gray-darker:          lighten(#000, 20%);
-@gray-dark:            lighten(#000, 40%);
-@gray:                 lighten(#000, 55%);
-@gray-light:           lighten(#000, 70%);
-@gray-lighter:         lighten(#000, 80%);
+$gray-darker:          lighten(#000, 20%);
+$gray-dark:            lighten(#000, 40%);
+$gray:                 lighten(#000, 55%);
+$gray-light:           lighten(#000, 70%);
+$gray-lighter:         lighten(#000, 80%);
 
 /* Backgrounds Colors ------------------------------------------------*/
 
-@bg-blue: background(@color-blue);
-@bg-turquoise: background(@color-turquoise);
-@bg-green: background(@color-green); 
-@bg-yellow: background(@color-yellow); 
-@bg-orange: background(@color-orange); 
-@bg-red: background(@color-red); 
-@bg-pink: background(@color-pink);
-@bg-purple: background(@color-purple); 
-@bg-brown: background(@color-brown);
+$bg-blue: background($color-blue);
+$bg-turquoise: background($color-turquoise);
+$bg-green: background($color-green); 
+$bg-yellow: background($color-yellow); 
+$bg-orange: background($color-orange); 
+$bg-red: background($color-red); 
+$bg-pink: background($color-pink);
+$bg-purple: background($color-purple); 
+$bg-brown: background($color-brown);
 
 
 /* ---- Default Color HTML Class ---- */
 
-.bg-blue      { background-color: @color-blue;}
-.bg-turquoise { background-color: @color-turquoise;}
-.bg-green     { background-color: @color-green;}
-.bg-yellow    { background-color: @color-yellow;}
-.bg-orange    { background-color: @color-orange;}
-.bg-red       { background-color: @color-red;}
-.bg-pink      { background-color: @color-pink;}
-.bg-purple    { background-color: @color-purple;}
-.bg-brown     { background-color: @color-brown;}
-
-.text-blue      { color: @color-blue;}
-.text-turquoise { color: @color-turquoise;}
-.text-green     { color: @color-green;}
-.text-yellow    { color: @color-yellow;}
-.text-orange    { color: @color-orange;}
-.text-red       { color: @color-red;}
-.text-pink      { color: @color-pink;}
-.text-purple    { color: @color-purple;}
-.text-brown     { color: @color-brown;}
\ No newline at end of file
+.bg-blue      { background-color: $color-blue;}
+.bg-turquoise { background-color: $color-turquoise;}
+.bg-green     { background-color: $color-green;}
+.bg-yellow    { background-color: $color-yellow;}
+.bg-orange    { background-color: $color-orange;}
+.bg-red       { background-color: $color-red;}
+.bg-pink      { background-color: $color-pink;}
+.bg-purple    { background-color: $color-purple;}
+.bg-brown     { background-color: $color-brown;}
+
+.text-blue      { color: $color-blue;}
+.text-turquoise { color: $color-turquoise;}
+.text-green     { color: $color-green;}
+.text-yellow    { color: $color-yellow;}
+.text-orange    { color: $color-orange;}
+.text-red       { color: $color-red;}
+.text-pink      { color: $color-pink;}
+.text-purple    { color: $color-purple;}
+.text-brown     { color: $color-brown;}
\ No newline at end of file
diff --git a/addons/theme_default/static/src/scss/option_color_amethyst.scss b/addons/theme_default/static/src/scss/option_color_amethyst.scss
index ef509d6325d..ed66abd08ac 100644
--- a/addons/theme_default/static/src/scss/option_color_amethyst.scss
+++ b/addons/theme_default/static/src/scss/option_color_amethyst.scss
@@ -1,77 +1,77 @@
 /* GRAYS --------------------------------------------------------- */ 
 
-@gray-darker:            lighten(#000, 30%); 
+$gray-darker:            lighten(#000, 30%); 
 
 /* COLORS --------------------------------------------------------- */
 
-@color-primary:         @color-purple;
-@color-success:         @color-purple-dark;	
-@color-info:            @color-twilight;	
-@color-warning:         @color-red-dark;	 
-@color-danger:          @color-midnight;	 
+$color-primary:         $color-purple;
+$color-success:         $color-purple-dark;	
+$color-info:            $color-twilight;	
+$color-warning:         $color-red-dark;	 
+$color-danger:          $color-midnight;	 
 
 /* COLORED BG -------------------------------------------------------- */ 
 
 .bg-primary {
-    background-color: @color-clouds;
+    background-color: $color-clouds;
 }
 .bg-success {
-    background-color: @color-purple;
+    background-color: $color-purple;
 }
 .bg-info {
-    background-color: @color-twilight; 
+    background-color: $color-twilight; 
 }
 .bg-warning {
-    background-color: @color-purple-dark;
+    background-color: $color-purple-dark;
 }
 .bg-danger {
-    background-color: @color-midnight;
+    background-color: $color-midnight;
 }
 
 /* TEXTS & LINKS --------------------------------------------------- */	
 
-@text-muted:        @color-primary;
-@link-color:        @color-primary;
-@link-hover-color:  @color-success;
+$text-muted:        $color-primary;
+$link-color:        $color-primary;
+$link-hover-color:  $color-success;
 
 /* BUTTONS --------------------------------------------------------- */
 
-@btn-primary-bg:                 @color-silver;
-@btn-success-bg:                 @color-concrete;
-@btn-info-bg:                    @color-purple;
-@btn-warning-bg:                 @color-purple-light;
-@btn-danger-bg:                  @color-red;
+$btn-primary-bg:                 $color-silver;
+$btn-success-bg:                 $color-concrete;
+$btn-info-bg:                    $color-purple;
+$btn-warning-bg:                 $color-purple-light;
+$btn-danger-bg:                  $color-red;
 
 .btn .fa {
 	color: white;}
 
 .btn-default .fa {
-	color: @gray-dark;}
+	color: $gray-dark;}
 
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color 		{ background: @color-twilight; opacity: 0.85;} 
+.bg-transparent-color 		{ background: $color-twilight; opacity: 0.85;} 
 .bg-transparent-shade		{ background: black; opacity: 0.5;} 
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
-   background-color: @color-concrete-dark;
-    color: @gray-light;
+   background-color: $color-concrete-dark;
+    color: $gray-light;
     }	
 footer ul li a {
-	color: @color-clouds;
+	color: $color-clouds;
 	}	
 footer ul li a:hover {
 	color: white;
     text-decoration: none;
 	}   
 footer h4 {
-	color: @gray-lighter;
+	color: $gray-lighter;
 	padding-bottom: 12px;
     text-transform: uppercase;
     }
 footer .fa {
-    color: @color-concrete; 
+    color: $color-concrete; 
   }
\ No newline at end of file
diff --git a/addons/theme_default/static/src/scss/option_color_cobalt.scss b/addons/theme_default/static/src/scss/option_color_cobalt.scss
index a7e90b26be1..5c8eae78d53 100644
--- a/addons/theme_default/static/src/scss/option_color_cobalt.scss
+++ b/addons/theme_default/static/src/scss/option_color_cobalt.scss
@@ -1,74 +1,74 @@
 /* COLORS --------------------------------------------------------- */
 
-@color-primary:         @color-blue;
-@color-success:         @color-turquoise;
-@color-info:            @color-green;
-@color-warning:         @color-asphalt;
-@color-danger:          @color-midnight;
+$color-primary:         $color-blue;
+$color-success:         $color-turquoise;
+$color-info:            $color-green;
+$color-warning:         $color-asphalt;
+$color-danger:          $color-midnight;
 
 /* COLORED BG -------------------------------------------------------- */ 
 
 .bg-primary {
-    background-color: @color-wind;
+    background-color: $color-wind;
 }
 .bg-success {
-    background-color: @color-silver;
+    background-color: $color-silver;
 }
 .bg-info {
-    background-color: @color-blue;
+    background-color: $color-blue;
 }
 .bg-warning {
-    background-color: @color-blue-dark;
+    background-color: $color-blue-dark;
 }
 .bg-danger {
-    background-color: @color-asphalt;
+    background-color: $color-asphalt;
 }
 
 /* TEXTS & LINKS --------------------------------------------------- */  
 
-@text-muted:        @color-primary;
-@link-color:        @color-primary;
-@link-hover-color:  @color-info;
+$text-muted:        $color-primary;
+$link-color:        $color-primary;
+$link-hover-color:  $color-info;
 
 /* BUTTONS --------------------------------------------------------- */
 
-@btn-primary-bg:                 @color-blue;
-@btn-success-bg:                 @color-turquoise;
-@btn-info-bg:                    @color-green;
-@btn-warning-bg:                 @color-orange;
-@btn-danger-bg:                  @color-red;
+$btn-primary-bg:                 $color-blue;
+$btn-success-bg:                 $color-turquoise;
+$btn-info-bg:                    $color-green;
+$btn-warning-bg:                 $color-orange;
+$btn-danger-bg:                  $color-red;
 
 .btn .fa {
 	color: white;}
 
 .btn-default .fa {
-	color: @gray-dark;}
+	color: $gray-dark;}
 
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color { background: @color-blue-dark; opacity: 0.9;}
+.bg-transparent-color { background: $color-blue-dark; opacity: 0.9;}
 .bg-transparent-shade { background: black; opacity: 0.5;}
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
-   background-color: @color-midnight;
-   color: @gray;
+   background-color: $color-midnight;
+   color: $gray;
 }
 footer ul li a {
-	color: @color-silver;
+	color: $color-silver;
 }
 
 footer ul li a:hover {
-	color: @color-clouds;
+	color: $color-clouds;
     text-decoration: none;
 }
 footer h4 {
-	color: @color-stone;
+	color: $color-stone;
 	padding-bottom: 12px;
     text-transform: uppercase;
 }
 footer .fa {
-    color: @gray-light;
+    color: $gray-light;
 }
diff --git a/addons/theme_default/static/src/scss/option_color_emerald.scss b/addons/theme_default/static/src/scss/option_color_emerald.scss
index 69df3204fcc..ab1dc35b132 100644
--- a/addons/theme_default/static/src/scss/option_color_emerald.scss
+++ b/addons/theme_default/static/src/scss/option_color_emerald.scss
@@ -1,73 +1,73 @@
 /* COLORS --------------------------------------------------------- */
 
-@color-primary:         @color-green;
-@color-success:         @color-turquoise;
-@color-info:            @color-turquoise-dark;
-@color-warning:         @color-asphalt;
-@color-danger:          @color-midnight;
+$color-primary:         $color-green;
+$color-success:         $color-turquoise;
+$color-info:            $color-turquoise-dark;
+$color-warning:         $color-asphalt;
+$color-danger:          $color-midnight;
 
 /* COLORED BG -------------------------------------------------------- */ 
 
 .bg-primary {
-    background-color: @color-wind;
+    background-color: $color-wind;
 }
 .bg-success {
-    background-color: @color-silver;
+    background-color: $color-silver;
 }
 .bg-info {
-    background-color: @color-green-dark;
+    background-color: $color-green-dark;
 }
 .bg-warning {
-    background-color: @color-green;
+    background-color: $color-green;
 }
 .bg-danger {
-    background-color: @color-forest;
+    background-color: $color-forest;
 }
 
 /* TEXTS & LINKS --------------------------------------------------- */  
 
-@text-muted:        @color-success;
-@link-color:        @color-success;
-@link-hover-color:  @color-primary;
+$text-muted:        $color-success;
+$link-color:        $color-success;
+$link-hover-color:  $color-primary;
 
 /* BUTTONS --------------------------------------------------------- */
 
-@btn-primary-bg:                 @color-green;
-@btn-success-bg:                 @color-turquoise;
-@btn-info-bg:                    @color-blue;
-@btn-warning-bg:                 @color-orange;
-@btn-danger-bg:                  @color-red;
+$btn-primary-bg:                 $color-green;
+$btn-success-bg:                 $color-turquoise;
+$btn-info-bg:                    $color-blue;
+$btn-warning-bg:                 $color-orange;
+$btn-danger-bg:                  $color-red;
 
 .btn .fa {
 	color: white;}
 
 .btn-default .fa {
-	color: @gray-dark;}
+	color: $gray-dark;}
 
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color 		{ background: @color-green-dark; opacity: 0.9;} 
+.bg-transparent-color 		{ background: $color-green-dark; opacity: 0.9;} 
 .bg-transparent-shade		{ background: black; opacity: 0.5;} 
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
-   background-color: @color-concrete-dark;
-    color: @gray;
+   background-color: $color-concrete-dark;
+    color: $gray;
     }	
 footer ul li a {
-	color: @color-clouds;
+	color: $color-clouds;
 	}	
 footer ul li a:hover {
 	color: white;
     text-decoration: none;
 	}   
 footer h4 {
-	color: @color-silver;
+	color: $color-silver;
 	padding-bottom: 12px;
     text-transform: uppercase;
     }
 footer .fa {
-    color: @color-clouds; 
+    color: $color-clouds; 
   }	
diff --git a/addons/theme_default/static/src/scss/option_color_gold.scss b/addons/theme_default/static/src/scss/option_color_gold.scss
index 77fe9a683df..3cc62a3f1a3 100644
--- a/addons/theme_default/static/src/scss/option_color_gold.scss
+++ b/addons/theme_default/static/src/scss/option_color_gold.scss
@@ -1,75 +1,75 @@
 /* COLORS --------------------------------------------------------- */
 
-@color-primary:         @color-orange;	
-@color-success:         @color-red;	
-@color-info:            @color-yellow-dark;	
-@color-warning:         @color-red-dark;	 
-@color-danger:          @color-orange-dark;
+$color-primary:         $color-orange;	
+$color-success:         $color-red;	
+$color-info:            $color-yellow-dark;	
+$color-warning:         $color-red-dark;	 
+$color-danger:          $color-orange-dark;
 
 /* COLORED BG -------------------------------------------------------- */ 
 
 .bg-primary {
-    background-color: @color-sand;
+    background-color: $color-sand;
 }
 .bg-success {
-    background-color: @color-yellow;
+    background-color: $color-yellow;
 }
 .bg-info {
-    background-color: @color-orange;
+    background-color: $color-orange;
 }
 .bg-warning {
-    background-color: @color-yellow-dark;
+    background-color: $color-yellow-dark;
 }
 .bg-danger {
-    background-color: @color-orange-dark;
+    background-color: $color-orange-dark;
 }
 
 /* TEXTS & LINKS ------------------------------------------------------- */ 
 
-@text-muted:        @gray;
-@link-color:        @color-info;
-@link-hover-color:  @color-primary;
+$text-muted:        $gray;
+$link-color:        $color-info;
+$link-hover-color:  $color-primary;
 
 /* BUTTONS --------------------------------------------------------- */
 
-@btn-primary-bg:                 @color-yellow;
-@btn-success-bg:                 @color-orange;
-@btn-info-bg:                    @color-yellow-dark;
-@btn-warning-bg:                 @color-orange-dark;
-@btn-danger-bg:                  @color-red-dark;
+$btn-primary-bg:                 $color-yellow;
+$btn-success-bg:                 $color-orange;
+$btn-info-bg:                    $color-yellow-dark;
+$btn-warning-bg:                 $color-orange-dark;
+$btn-danger-bg:                  $color-red-dark;
 
 .btn .fa {
 	color: white;}
 
 .btn-default .fa {
-	color: @gray-dark;}
+	color: $gray-dark;}
 
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color 		{ background: @color-orange-dark; opacity: 0.85;} 
+.bg-transparent-color 		{ background: $color-orange-dark; opacity: 0.85;} 
 .bg-transparent-shade		{ background: black; opacity: 0.5;} 
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
-   background-color: @color-orange-dark;
+   background-color: $color-orange-dark;
    color: white;
     }	
 footer ul li a {
-	color: @color-beach;
+	color: $color-beach;
 	}	
 footer ul li a:hover {
-	color:  @color-yellow;
+	color:  $color-yellow;
     text-decoration: none;
 	}   
 footer h4 {
-	color:  @color-beach;
+	color:  $color-beach;
 	padding-bottom: 12px;
     text-transform: uppercase;
     }
 footer .fa {
-    color:  @color-beach;
+    color:  $color-beach;
   }	
 
 
diff --git a/addons/theme_default/static/src/scss/option_color_ruby.scss b/addons/theme_default/static/src/scss/option_color_ruby.scss
index 63bca9ecc92..12fce8ea4e6 100644
--- a/addons/theme_default/static/src/scss/option_color_ruby.scss
+++ b/addons/theme_default/static/src/scss/option_color_ruby.scss
@@ -1,78 +1,78 @@
 /* GRAYS --------------------------------------------------------- */ 
 
-@gray:                   lighten(#000, 50%);
+$gray:                   lighten(#000, 50%);
 
 /* COLORS --------------------------------------------------------- */
 
-@color-primary:         @color-red;
-@color-success:         @color-red-dark;
-@color-info:            @color-orange;
-@color-warning:         @color-purple;
-@color-danger:          @color-orange-dark;
+$color-primary:         $color-red;
+$color-success:         $color-red-dark;
+$color-info:            $color-orange;
+$color-warning:         $color-purple;
+$color-danger:          $color-orange-dark;
 
 /* COLORED BG -------------------------------------------------------- */ 
 
 .bg-primary {
-    background-color: @color-sand;
+    background-color: $color-sand;
 }
 .bg-success {
-    background-color: @color-red;
+    background-color: $color-red;
 }
 .bg-info {
-    background-color: @color-red-dark;
+    background-color: $color-red-dark;
 }
 .bg-warning {
-    background-color: @color-orange;
+    background-color: $color-orange;
 }
 .bg-danger {
-    background-color: @color-orange-dark;
+    background-color: $color-orange-dark;
 }
 
 /* TEXT & LINKS -------------------------------------------------------- */ 
 
-@text-muted:        @gray;
-@link-color:        @color-primary;
-@link-hover-color:  @color-success;
+$text-muted:        $gray;
+$link-color:        $color-primary;
+$link-hover-color:  $color-success;
 
 /* BUTTONS --------------------------------------------------------- */
 
-@btn-primary-bg:                 @color-red;
-@btn-success-bg:                 @color-orange;
-@btn-info-bg:                    @color-yellow-dark;
-@btn-warning-bg:                 @color-orange-dark;
-@btn-danger-bg:                  @color-red-dark;
+$btn-primary-bg:                 $color-red;
+$btn-success-bg:                 $color-orange;
+$btn-info-bg:                    $color-yellow-dark;
+$btn-warning-bg:                 $color-orange-dark;
+$btn-danger-bg:                  $color-red-dark;
 
 .btn .fa {
 	color: white;}
 
 .btn-default .fa {
-	color: @gray-dark;}
+	color: $gray-dark;}
 
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color 		{ background: @color-red-dark; opacity: 0.85;} 
+.bg-transparent-color 		{ background: $color-red-dark; opacity: 0.85;} 
 .bg-transparent-shade		{ background: black; opacity: 0.5;} 
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
-   background-color: @color-burgundy;
-   color: @gray-lighter;
+   background-color: $color-burgundy;
+   color: $gray-lighter;
     }	
 footer ul li a {
 	color: white;
 	}	
 footer ul li a:hover {
-	color: @color-orange;
+	color: $color-orange;
     text-decoration: none;
 	}   
 footer h4 {
-	color: @color-sand;
+	color: $color-sand;
     padding-bottom: 12px;
     text-transform: uppercase;
     }
 footer .fa {
-    color: @color-red;
+    color: $color-red;
   }	
 
diff --git a/addons/theme_default/static/src/scss/option_color_stone.scss b/addons/theme_default/static/src/scss/option_color_stone.scss
index e3a217f14a2..42c9937270d 100644
--- a/addons/theme_default/static/src/scss/option_color_stone.scss
+++ b/addons/theme_default/static/src/scss/option_color_stone.scss
@@ -1,75 +1,75 @@
 /* COLORS --------------------------------------------------------- */
 
-@color-primary:         @color-concrete;	
-@color-success:         @color-turquoise;	
-@color-info:            @color-stone;	
-@color-warning:         @color-concrete-dark;	
-@color-danger:          @color-midnight;	 
+$color-primary:         $color-concrete;	
+$color-success:         $color-turquoise;	
+$color-info:            $color-stone;	
+$color-warning:         $color-concrete-dark;	
+$color-danger:          $color-midnight;	 
 
 /* COLORED BG -------------------------------------------------------- */ 
 
 .bg-primary {
-    background-color: @color-clouds;
+    background-color: $color-clouds;
 }
 .bg-success {
-    background-color: @color-silver;
+    background-color: $color-silver;
 }
 .bg-info {
-    background-color: @color-stone; 
+    background-color: $color-stone; 
 }
 .bg-warning {
-    background-color: @color-concrete-dark;
+    background-color: $color-concrete-dark;
 }
 .bg-danger {
-    background-color: @color-asphalt; 
+    background-color: $color-asphalt; 
 }
 
 /* TEXT & LINKS -------------------------------------------------------- */ 
 
-@text-muted:        @color-primary;
-@link-color:        @color-primary;
-@link-hover-color:  @color-info;
+$text-muted:        $color-primary;
+$link-color:        $color-primary;
+$link-hover-color:  $color-info;
 
 /* BUTTONS --------------------------------------------------------- */ 
 
-@btn-primary-bg:                 @color-concrete;
-@btn-success-bg:                 @color-blue;
-@btn-info-bg:                    @color-asphalt;
-@btn-warning-bg:                 @color-red;
-@btn-danger-bg:                  @color-red-dark;
+$btn-primary-bg:                 $color-concrete;
+$btn-success-bg:                 $color-blue;
+$btn-info-bg:                    $color-asphalt;
+$btn-warning-bg:                 $color-red;
+$btn-danger-bg:                  $color-red-dark;
 
 .btn .fa {
 	color: white;}
 
 .btn-default .fa {
-	color: @gray-dark;}
+	color: $gray-dark;}
 
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color 		{ background: @color-stone; opacity: 0.9;} 
+.bg-transparent-color 		{ background: $color-stone; opacity: 0.9;} 
 .bg-transparent-shade		{ background: black; opacity: 0.5;} 
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
-   background-color: @color-concrete-dark;
-   color: @color-concrete;
+   background-color: $color-concrete-dark;
+   color: $color-concrete;
     }
 footer ul li a {
-	color: @color-clouds;
+	color: $color-clouds;
 	}	
 footer ul li a:hover {
 	color: white;
     text-decoration: none;
 	}
 footer h4 {
-	color: @color-silver;
+	color: $color-silver;
 	padding-bottom: 12px;
     text-transform: uppercase;
     }  
 footer .fa {
-    color: @color-clouds; 
+    color: $color-clouds; 
   }
 
 
diff --git a/addons/theme_default/static/src/scss/option_font.scss b/addons/theme_default/static/src/scss/option_font.scss
index 2ce3b03e62c..c62716313f5 100644
--- a/addons/theme_default/static/src/scss/option_font.scss
+++ b/addons/theme_default/static/src/scss/option_font.scss
@@ -1,2 +1,2 @@
-@font-family-sans-serif: Georgia, "Times New Roman", Times, serif;
-@font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: Georgia, "Times New Roman", Times, serif;
+$font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
diff --git a/addons/theme_default/static/src/scss/option_layout_boxed.scss b/addons/theme_default/static/src/scss/option_layout_boxed.scss
index 4e258175923..f6a428752bd 100644
--- a/addons/theme_default/static/src/scss/option_layout_boxed.scss
+++ b/addons/theme_default/static/src/scss/option_layout_boxed.scss
@@ -1,5 +1,5 @@
 #wrapwrap {
-    @media (min-width: @screen-sm-min){
+    @media (min-width: $screen-sm-min){
         width: 85%;
         margin: 0 auto;
     }