Map functions

Since version 3.3, Sass has not only supported lists, as discussed in the List functions recipe of this chapter, but also maps. Maps are a list of key value pairs, also called associative arrays or hashes in other languages.

Getting ready

Install Ruby Sass to compile your SCSS code on the command line. Read the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, to find out how to install Ruby Sass.

How to do it...

Here are the steps showing implementation of map functions:

1. Create a file called main.scss, which will contain the following SCSS code:

    $configuration: ( //defaults
     width: 768px,
     colors: (
       default: #ff0,
       alert: #f00
     )
   );
   
   $configuration: map-merge($configuration, (width: 1024px)); //customization
   
   element {
     background-color: map-get(map-get($configuration, colors), default);
     width: map-get($configuration, width);
   }

2. Then, run the following command in your console:

   sass main.scss
   

3. The command from the previous step should...