Cacher is the code snippet organizer for pro developers

.color-red {
  color: red;
}

.color-blue {
  color: blue;
}

.color-black {
  color: black;
}

.color-white {
  color: white;
}

.font-body {
  font-size: 16px;
}

.font-heading {
  font-size: 24px;
}

.font-hero {
  font-size: 32px;
}

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$config: (
  color-red: red,
  color-blue: blue,
  color-black: black,
  color-white: white,
  font-body: 16px,
  font-heading: 24px,
  font-hero: 32px,
);

@each $key, $value in $config {
  @if str-index($key, 'color-') {
    .#{$key} {
      color: $value;
    }
  }
  @if str-index($key, 'font-') {
    .#{$key} {
      font-size: $value;
    }
  }
}