diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index 494001ffd85..54ab622bae4 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -22,17 +22,17 @@ $subtext:           #767676 !default;                                  // small,
 
 // export vars as CSS vars
 :root {
-	--woocommerce: $woocommerce;
-	--wc-green: $green;
-	--wc-red: $red;
-	--wc-orange: $orange;
-	--wc-blue: $blue;
-	--wc-primary: $primary;
-	--wc-primary-text: $primarytext;
-	--wc-secondary: $secondary;
-	--wc-secondary-text: $secondarytext;
-	--wc-highlight: $highlight;
-	--wc-highligh-text: $highlightext;
-	--wc-content-bg: $contentbg;
-	--wc-subtext: $subtext;
+	--woocommerce: #{$woocommerce};
+	--wc-green: #{$green};
+	--wc-red: #{$red};
+	--wc-orange: #{$orange};
+	--wc-blue: #{$blue};
+	--wc-primary: #{$primary};
+	--wc-primary-text: #{$primarytext};
+	--wc-secondary: #{$secondary};
+	--wc-secondary-text: #{$secondarytext};
+	--wc-highlight: #{$highlight};
+	--wc-highligh-text: #{$highlightext};
+	--wc-content-bg: #{$contentbg};
+	--wc-subtext: #{$subtext};
 }