Improvements with map

At last turn, we had created a list variable named $icons which contained the values needed to create the css for the font-awesome fonts.

$icons: (glass "\f000") (music "\f001") (search "\f002") (envelope-o "\f003");

With a map data type, we can take advantage of the key/value pair in the following manner:

$icons: (glass: "\f000", music: "\f001", search: "\f002", envelope-o: "\f003");

To take advantage of this new map structure, our @each loop can be re-written as such:

@each $icon-name, $icon-value in $icons {
    .#{$fa-css-prefix}-#{$icon-name}:before {
        content: $icon-value;
    }
}

As you can see, the first variable $icon-name is the key to each pair and the second value $icon-value is the value. This is a way of giving us access to the individual key and value. Another way of extracting the key and value is to get them using a single variable. Hence, you can also write the @each as such:

@each $icon in $icons {
    .#{$fa-css-prefix}-#{nth($icon, 1)}:before {
        content: nth($icon, 2);
    }
}

When returning a single variable, the return value is a list (data type) of key/value. As you can see, this has made the setup a bit easier. However, we think we can further enhance this by taking further advantage of maps and lists.