Generate CSS variables for colors, breakpoints, fonts (#23761)

* Generate CSS variables

See #23349
Supersedes #23446

* Ignore _root.scss for linting

scss/_root.scss

@@ -0,0 +1,16 @@
+:root {
+  @each $color, $value in $colors {
+    --#{$color}: $value;
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$color}: $value;
+  }
+
+  @each $bp, $value in $grid-breakpoints {
+    --breakpoint-#{$bp}: $value;
+  }
+
+  --font-family-sans-serif: $font-family-sans-serif;
+  --font-family-monospace: $font-family-monospace;
+}

scss/bootstrap.scss

@@ -8,6 +8,7 @@
 @import "functions";
 @import "variables";
 @import "mixins";
+@import "root";
 @import "print";
 @import "reboot";
 @import "type";