Add Using Maps In SCSS as a css til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_830 TILs and counting..._
+_831 TILs and counting..._
 
 ---
 
@@ -101,6 +101,7 @@ _830 TILs and counting..._
 - [Parameterized SCSS Mixins](css/parameterized-scss-mixins.md)
 - [:root Has Higher Specificity Than html](css/root-has-higher-specificity-than-html.md)
 - [Style A Background With A Linear Gradient](css/style-a-background-with-a-linear-gradient.md)
+- [Using Maps In SCSS](css/using-maps-in-scss.md)
 
 ### Devops
 

css/using-maps-in-scss.md

@@ -0,0 +1,32 @@
+# Using Maps In SCSS
+
+You can collect a set of like values into a
+[map](https://sass-lang.com/documentation/values/maps) with the following SCSS
+syntax:
+
+```scss
+$backgrounds: (
+  "gray": #AAAAAA,
+  "red": #FF4136,
+  "blue": #0074D9,
+);
+```
+
+You can then access a value from the map using the [`map-get`
+function](https://sass-lang.com/documentation/values/maps#look-up-a-value):
+
+```scss
+.boxA {
+  background-color: map-get($backgrounds, "gray");
+}
+
+.boxB {
+  background-color: map-get($backgrounds, "red");
+}
+
+.boxC {
+  background-color: map-get($backgrounds, "blue");
+}
+```
+
+See a [live example here](https://codepen.io/jbranchaud/pen/WVJrgp).