diff --git a/README.md b/README.md index b7e3ef6..1a8d4b4 100644 --- a/README.md +++ b/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 diff --git a/css/using-maps-in-scss.md b/css/using-maps-in-scss.md new file mode 100644 index 0000000..8c40bf0 --- /dev/null +++ b/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).