Sass maps make it possible to create congruous, contextual CSS. As an example, let's look at heading sizes.

I try to keep the font-size differences in my headings uniform, i.e.:

  h1 {
    font-size: 3em;
}
h2 {
    font-size: 2.5em; /* Reduce by 0.5em */
}
h3 {
    font-size: 2em; /* etc. */
}

I'll use a Sass mixin to do this, sometimes:

  /* Create a step size.*/
/* This is the percentage each heading will be reduced by. */
$step-size-heading: 0.33333;
/* The mixin */
@mixin heading-size($size) {
    font-size: $size * $step-size-heading + em;
}
h1 {
    @include heading-size(6);
}
h2 {
    @include heading-size(5);
}
h3 {
    @include heading-size(4);
}
h4 {
    @include heading-size(3);
}
h5 {
    @include heading-size(2);
}
h6 {
    @include heading-size(1);
}

Which would compile to:

  h1 {
  font-size: 2.0em;
}
h2 {
  font-size: 1.66667em;
}
h3 {
  font-size: 1.33333em;
}
h4 {
  font-size: 1.0em;
}
h5 {
  font-size: 0.66667em;
}
h6 {
  font-size: 0.33333em;
}

I might also use an amplifier value to increase or decrease the font-sizes for all of my headings, together:

  /* Create a step size. */
/* This is the percentage each heading will be reduced by. */
$step-size-heading: 0.33333;
/* Amplifier value */
$amplifier-heading: 1.5;
/* The mixin */
@mixin heading-size($size) {
    font-size: $size * $step-size-heading * $amplifier-heading + em;
}
h1 {
    @include heading-size(6);
}
h2 {
    @include heading-size(5);
}
h3 {
    @include heading-size(4);
}
h4 {
    @include heading-size(3);
}
h5 {
    @include heading-size(2);
}
h6 {
    @include heading-size(1);
}

Which would output to:

  header h1 {
  font-size: 3.0em;
}
header h2 {
  font-size: 2.5em;
}
header h3 {
  font-size: 2.0em;
}
header h4 {
  font-size: 1.5em;
}
header h5 {
  font-size: 1.0em;
}
header h6 {
  font-size: 0.5em;
}

But one problem I often run into, especially with larger sites, is that my headings need different sizes based on context. I might have an <h1> and an <h2> in the header, but I might also have an <h1> and an <h2> in an article. There could also be a range of headings in the aside, and in the footer. And in order to keep those sections visually distinct, I might want an <h2> in the header to be a different size from the one in the article, and for both of those to be differently sized than the <h2> in the aside, etc.

This is the sort of problem for which Sass maps are especially helpful. Create a series of contexts, with number values for each, ranging from 0 to 1, where each value represents a percentage of the largest contextual font-size:

  /* The Sass "context" map */
$context-font: (
  header: 1, /* 100% */
  article: 0.67, /* 67%  */
  footer: 0.5, /* 50%  */
  aside: 0.33 /* 33% */
);

Then, use @each to loop through each context, and output a series of heading sizes based on the value of each:

  @each $element, $value in $context-font {
  #{$element} {
    h1 {
      @include heading-size(6 * $value);
    }

    h2 {
      @include heading-size(5 * $value);
    }

    h3 {
      @include heading-size(4 * $value);
    }

    h4 {
      @include heading-size(3 * $value);
    }

    h5 {
      @include heading-size(2 * $value);
    }

    h6 {
      @include heading-size(1 * $value);
    }
  }
}

Which compiles to:

  header h1 {
  font-size: 3.0em;
}
header h2 {
  font-size: 2.5em;
}
header h3 {
  font-size: 2.0em;
}
header h4 {
  font-size: 1.5em;
}
header h5 {
  font-size: 1.0em;
}
header h6 {
  font-size: 0.5em;
}

article h1 {
  font-size: 2.01em;
}
article h2 {
  font-size: 1.675em;
}
article h3 {
  font-size: 1.34em;
}
article h4 {
  font-size: 1.005em;
}
article h5 {
  font-size: 0.67em;
}
article h6 {
  font-size: 0.335em;
}

footer h1 {
  font-size: 1.5em;
}
footer h2 {
  font-size: 1.25em;
}
footer h3 {
  font-size: 1.0em;
}
footer h4 {
  font-size: 0.75em;
}
footer h5 {
  font-size: 0.5em;
}
footer h6 {
  font-size: 0.25em;
}

aside h1 {
  font-size: 0.99em;
}
aside h2 {
  font-size: 0.825em;
}
aside h3 {
  font-size: 0.66em;
}
aside h4 {
  font-size: 0.495em;
}
aside h5 {
  font-size: 0.33em;
}
aside h6 {
  font-size: 0.165em;
}

Here's the final Pen:

Of course, you could customize that @each control directive to handle more than just font-sizes. And the list of elements in the map could just as easily be class names:

  /* The Sass "context" map */
$context-font: (
  header-main: 1, /* 100% */
  post: 0.67, /* 67%  */
  footer-main: 0.5, /* 50%  */
  sidebar: 0.33 /* 33% */
);

@each $class-name, $value in $context-font {
  .#{$class-name} { /* Note the period, which compiles to a class, instead of an element */
    h1 {
      @include heading-size(6 * $value);
    }

    h2 {
      @include heading-size(5 * $value);
    }

    h3 {
      @include heading-size(4 * $value);
    }

    h4 {
      @include heading-size(3 * $value);
    }

    h5 {
      @include heading-size(2 * $value);
    }

    h6 {
      @include heading-size(1 * $value);
    }
  }
}


8,701 0 34