_color.scss

$theme_colors: (
  black: $natural-black,
  gray-dd: $darker-gray,
  gray-d: $dark-gray,
  gray: $gray,
  gray-l: $light-gray,
  gray-ll: $lighter-gray,
  white: $white,
  red: $ted-red
);

$mq-xs-min: "min-width: #{$mq-xs}";
$mq-sm-min: "min-width: #{$mq-sm}";
$mq-md-min: "min-width: #{$mq-md}";
$mq-lg-min: "min-width: #{$mq-lg}";
$mq-xl-min: "min-width: #{$mq-xl}";

$breaks: (n: 'none', xs: $mq-xs-min, sm: $mq-sm-min, md: $mq-md-min, lg: $mq-lg-min, xl: $mq-xl-min);


@each $break, $mq in $breaks {
  @each $label, $color in $theme_colors {
    @if $break == n {
      .bg\:#{$label} {
        background-color: $color;
      }

      .c\:#{$label} {
        color: $color;
      }

      .hover\/bg\:#{$label}:hover {
        background-color: $color;
      }

      .hover\/c\:#{$label}:hover {
        color: $color;
      }
      @for $i from 1 through 9 {
        .bg\:#{$label}\.#{$i} {
          background-color: transparentize($color, ($i / 10));
        }

        .c\:#{$label}\.#{$i} {
          color: transparentize($color, ($i / 10));
        }

        .hover\/bg\:#{$label}\.#{$i}:hover {
          background-color: transparentize($color, ($i / 10));
        }

        .hover\/c\:#{$label}\.#{$i}:hover {
          color: transparentize($color, ($i / 10));
        }
      }
    } @else {
      @media($mq) {
        .bg\:#{$label}\@#{$break} {
          background-color: $color;
        }

        .c\:#{$label}\@#{$break} {
          color: $color;
        }

        .hover\/bg\:#{$label}\@#{$break}:hover {
          background-color: $color;
        }

        .hover\/c\:#{$label}\@#{$break}:hover {
          color: $color;
        }
        @for $i from 1 through 9 {
          .bg\:#{$label}\.#{$i}\@#{$break} {
            background-color: transparentize($color, ($i / 10));
          }

          .c\:#{$label}\.#{$i}\@#{$break} {
            color: transparentize($color, ($i / 10));
          }

          .hover\/bg\:#{$label}\.#{$i}\@#{$break}:hover {
            background-color: transparentize($color, ($i / 10));
          }

          .hover\/c\:#{$label}\.#{$i}\@#{$break}:hover {
            color: transparentize($color, ($i / 10));
          }
        }
      }
    }
  }
}