From 67d7e26e05f23bc240f3c411a134d60a7e78a798 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Saparelli?= <felix@passcod.name>
Date: Mon, 2 Oct 2017 17:00:24 +1300
Subject: [PATCH] Generate CSS variables for colors, breakpoints, fonts
 (#23761)

* Generate CSS variables

See #23349
Supersedes #23446

* Ignore _root.scss for linting
---
 .scss-lint.yml      |  3 +++
 scss/_root.scss     | 16 ++++++++++++++++
 scss/bootstrap.scss |  1 +
 3 files changed, 20 insertions(+)
 create mode 100644 scss/_root.scss

diff --git a/.scss-lint.yml b/.scss-lint.yml
index eabc8a358c..552168dda7 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -3,6 +3,9 @@ scss_files:
   - "scss/**/*.scss"
   - "docs/assets/scss/**/*.scss"
 
+exclude:
+  - "scss/_root.scss"
+
 plugin_directories: ['.scss-linters']
 
 # List of gem names to load custom linters from (make sure they are already
diff --git a/scss/_root.scss b/scss/_root.scss
new file mode 100644
index 0000000000..78ac03915d
--- /dev/null
+++ b/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;
+}
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 648f446b6e..f83914dc3f 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -8,6 +8,7 @@
 @import "functions";
 @import "variables";
 @import "mixins";
+@import "root";
 @import "print";
 @import "reboot";
 @import "type";