Update _colors.scss

Getting a warning
WARNING: You probably don't mean to use the color value white in interpolation here.
It may end up represented as white, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "white").
If you really want to use the color value here, use '"" + $color'.

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;
     }