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

heading.scss

/* 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);
}