@each $variant, $range in $color-ranges {
  @each $suffix, $color in $range {
    #{'.bg-#{$variant}-#{$suffix}'} {
      background-color: $color;
    }

    #{'.text-#{$variant}-#{$suffix}'} {
      color: $color;
    }
  }
}

@each $index, $size in $type-scale {
  #{'.text-#{$index}'} {
    font-size: $size;
  }
}

.border-width-1px { border-width: 1px; }
.border-style-dashed { border-style: dashed; }
.border-style-solid { border-style: solid; }
.border-color-blue-300 { border-color: $blue-300; }
.border-color-default { border-color: $border-color; }