Summary
Highlights
Sass maps are similar to associative arrays or JavaScript objects, allowing you to collect variables or values in key-value pairs. They are particularly useful for generating utility classes by looping through the map and creating a class for each value.
The video demonstrates creating a "colors" map to store a palette of colors. It shows how to use existing variables (like primary, secondary, error, info) as values and also how to add new key-value pairs with specific hex codes or color keywords (e.g., blue, red, green, black, white). Using variables ensures that color changes only need to be made in one place.
The `map-get` function is introduced to retrieve values from a map. The first argument is the map name (e.g., `colors`), and the second is the key (e.g., `purple`). The example shows how to debug and see the retrieved color value in the terminal.
The `map-has-key` function is explained, which checks if a map contains a specific key. It takes the map name and the key as arguments and returns `true` or `false`. This is useful for evaluating maps to see if a variable exists, which can be combined with `if` statements later.
The `map-remove` function is shown to remove a key-value pair from a map. The `map-merge` function is used to add new key-value pairs to an existing map. For `map-merge`, you pass the original map and then a new map containing the key-value pairs you want to add (e.g., adding a 'pink' color).
The video concludes by demonstrating how to use the `map-get` function directly within CSS selectors. An example shows setting the `background-color` of a `test-btn` class using a color retrieved from the `colors` map, illustrating how map functionality integrates with CSS styling.