From 4e9ba117c853d4b21776f9cba9992a8141b699e3 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Tue, 31 Dec 2019 09:22:53 -0600
Subject: [PATCH] Add Define CSS Custom Properties With SCSS Variables as a css
 til

---
 README.md                                     |  3 +-
 ...s-custom-properties-with-scss-variables.md | 40 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 css/define-css-custom-properties-with-scss-variables.md

diff --git a/README.md b/README.md
index 97f30fb..28bea21 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_894 TILs and counting..._
+_895 TILs and counting..._
 
 ---
 
@@ -102,6 +102,7 @@ _894 TILs and counting..._
 - [Clean Up Repetition With :is() Pseudo-Class](css/clean-up-repetition-with-is-pseudo-class.md)
 - [Conditional Styling For Unsupported CSS Features](css/conditional-styling-for-unsupported-css-features.md)
 - [Create A Pulsing Background With CSS Animation](css/create-a-pulsing-background-with-css-animation.md)
+- [Define CSS Custom Properties With CSS Variables](css/define-css-custom-properties-with-scss-variables.md)
 - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
 - [Give Elements The Same Width With Flexbox](css/give-elements-the-same-width-with-flexbox.md)
 - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
diff --git a/css/define-css-custom-properties-with-scss-variables.md b/css/define-css-custom-properties-with-scss-variables.md
new file mode 100644
index 0000000..c366656
--- /dev/null
+++ b/css/define-css-custom-properties-with-scss-variables.md
@@ -0,0 +1,40 @@
+# Define CSS Custom Properties With SCSS Variables
+
+It doesn't work to directly declare a CSS custom property using SCSS variables
+like this:
+
+```css
+$primary-action: #057A5B;
+
+.btn-primary {
+  --button-color: $primary-action;
+}
+```
+
+After SCSS pre-processing, the resulting CSS will look like this:
+
+```css
+.btn-primary {
+  --button-color: $primary-action;
+}
+```
+
+Instead of the variable being translated into its declared value (`#057A5B` in
+this case), it is left as is.
+
+This is because CSS custom property syntax is unusual enough that it gets
+processed literally. The only way to incorporate a variable is with
+_interpolation_.
+
+```css
+$primary-action: #057A5B;
+
+.btn-primary {
+  --button-color: #{$primary-action};
+}
+```
+
+Wrapping the SCSS variable in interpolation syntax (`#{ ... }`) will do the
+job.
+
+[source](https://sass-lang.com/documentation/style-rules/declarations#custom-properties)