Export sass vars to css var

assets/css/_variables.scss

@@ -19,3 +19,20 @@ $highlightext:      desaturate(lighten($highlight, 50%), 18%) !default;  // Text
 
 $contentbg:         #fff !default;                                     // Content BG - Tabs (active state)
 $subtext:           #767676 !default;                                  // small, breadcrumbs etc
+
+// export vars as CSS vars
+:root {
+	--woocommerce: $woocommerce;
+	--wc-green: $green;
+	--wc-red: $red;
+	--wc-orange: $orange;
+	--wc-blue: $blue;
+	--wc-primary: $primary;
+	--wc-primarytext: $primarytext;
+	--wc-secondary: $secondary;
+	--wc-secondarytext: $secondarytext;
+	--wc-highlight: $highlight;
+	--wc-highlightext: $highlightext;
+	--wc-contentbg: $contentbg;
+	--wc-subtext: $subtext;
+}