diff --git a/src/scss/utils/_colors.scss b/src/scss/utils/_colors.scss
index 1d9553561..4fae2f789 100644
--- a/src/scss/utils/_colors.scss
+++ b/src/scss/utils/_colors.scss
@@ -4,12 +4,12 @@
 SOCIAL COLORS
  */
 @each $color, $value in $social-colors {
-  .bg-#{$color} {
+  .bg-#{"" + $color} {
     color: #fff !important;
     background: $value !important;
   }
 
-  .text-#{$color} {
+  .text-#{"" + $color} {
     color: $value !important;
   }
 }
@@ -17,15 +17,15 @@ SOCIAL COLORS
 
 @if $enable-extra-colors {
   @each $color, $value in map-merge($colors, (dark: $dark, muted: $text-muted, white: $white)) {
-    .bg-#{$color} {
+    .bg-#{"" + $color} {
       background: $value;
     }
 
-    .text-#{$color} {
+    .text-#{"" + $color} {
       color: $value !important;
     }
 
-    .bg-#{$color}-lt {
+    .bg-#{"" + $color}-lt {
       color: $value !important;
       background: theme-color-lighter($value, true) !important;
     }