With the recent 3.3 version of Sass a new data type is available, maps. A map is a data structure which associate a key to a value. It’s somewhat equivalent to JSON structures in JavaScript. And maps are a well-known data structure in functional programming.

The map data type

Here I’m going to take two examples of how the map data types in Sass can help improve code conciseness. Maps in Sass are described here in the documentation. This is how to define a map in Sass:

$map: (
    key1: value1,
    key2: value2,
    key3: value3
);

The main possibilities of maps are accessing a value by key and looping on all the keys.

map-get($map, key1)  

Looping on all the keys:

@each $key, $value in $map {
    // …
}

Of course there are other functions available on maps. In the documentation:

Social icons and icon fonts

In my first example I’ll use Sass maps to design a list of social icons, a very common patterns on blogs for example. This is what we will get.

Social icons

Here is the HTML code, a simple unordered list with links to social profiles. We don’t need CSS classes since we can use CSS selectors with attribute matching instead.

<ul class="social-icons">  
    <li>
        <a href="https://twitter.com/">
            <span>Twitter</span>
        </a>
    </li>
  <li>
      <a href="https://plus.google.com/‎">
          <span>Google+</span>
      </a>
  </li>
  <li>
      <a href="https://www.facebook.com/">
          <span>Facebook</span>
      </a>
  </li>
  <li>
      <a href="https://github.com/">
          <span>GitHub</span>
      </a>
  </li>
  <li>
      <a href="https://www.linkedin.com/">
          <span>LinkedIn</span>
      </a>
  </li>
  <li>
      <a href="http://dribbble.com/">
          <span>Dribbble</span>
      </a>
  </li>
  <li>
      <a href="/rss">
          <span>RSS</span>
      </a>
  </li>
</ul>  

I’m going to use the Font Awesome icon font imported from the cdnjs CDN. The trick with Sass maps is to use a for each loop on the map structure.

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css";

.social-icons {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        display: inline-block;
        margin: 0 0.25em;
    }

    span {
        display: block;
        width: 0; height: 0;
        overflow: hidden;
    }

    a {
        display: inline-block;
        width: 2.5em; height: 2.5em;
        border-radius: 50%; // make a circle
        text-decoration: none;
        color: white;
        text-align: center;

        &:before {
            font: 1.5em/1.75 "FontAwesome";
        }

        $icons: (
            twitter:  (char: "\f099", color: #55acee),
            google:   (char: "\f0d5", color: #dd4b39),
            facebook: (char: "\f09a", color: #3b5998),
            github:   (char: "\f09b", color: #231f20),
            linkedin: (char: "\f0e1", color: #0977b5),
            dribbble: (char: "\f17d", color: #ea4c89),
            rss:      (char: "\f09e", color: #ff6600)
        );

        @each $social, $icon in $icons {      
            &[href*="#{$social}"] {
                background-color: map-get($icon, color);

                &:before {
                    content: map-get($icon, char);
                }
            }
        }
    }
}

Demo

See the Pen Social icons with Sass maps by Frédéric Perrin (@blustemy) on CodePen.

Breakpoints of responsive design

Another example with a map structure of breakpoints. The keys of the map are the names of the breakpoints and the values are the corresponding widths of the viewport. It helps associate names to numeric values and keep the breakpoints consistent throughout a project. Here’s the map variable containing all the breakpoints:

$breakpoints: (
    xs: 24em, // extra small
    s: 35em,  // small
    m: 55em,  // middle
    l: 62em   // large
);

And a simple mixin to generate the media query according to the given breakpoint:

@mixin breakpoint($bp, $rule: min-width) {
    @media screen and (#{$rule}: map-get($breakpoints, $bp)) {
        @content;
    }
}

Mobile first

In this example we have full width columns by default. Above the medium m breakpoint these columns become half width.

.column {
    width: 100%;

    @include breakpoint(m) {
        float: left;
        width: 50%;
    }
}

This generates these CSS lines:

.column {
    width: 100%;
}

@media screen and (min-width: 55em) {
    .column {
        float: left;
        width: 50%;
    }
}

Desktop first

In desktop first mode we have half width columns by default. They become full width below the medium m breakpoint.

.column {
    float: left;
    width: 50%;

    @include breakpoint(m, max-width) {
        float: none;
        width: 100%;
    }
}

This generates these CSS lines:

.column {
    float: left;
    width: 50%;
}

@media screen and (max-width: 55em) {
    .column {
        float: none;
        width: 100%;
    }
}

Demo

A demo with the two modes, mobile first or desktop first. The full page demo is here, try resizing your browser window.

See the Pen Responsive breakpoints with Sass maps by Frédéric Perrin (@blustemy) on CodePen.