Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.0.2)
// ----

// Sass

// Colors
$sea_green: #16a085;
$pomegranate: #c0392b;
$orange: #e04604;
$olive_green: #6a8500;
$pink: #b72898;
$purple: #491f70;
$turquoise: #02b4ce;
$green_gray: #7f8c8d;
$mustard: #c3a918;
$surf-green: #02aab3;
$maillot-jaune: #f0de16;
$caribe: #a6c9d1;
$chartreuse: #c8dc77;
$mediterranean-red: #ff513a;

$tint: ("greengray": $green_gray, "pink": $pink, "orange": $orange, "green": $olive_green,
        "purple": $purple, "turquoise": $turquoise, "pomegranate": $pomegranate, "seafoam": $sea_green,
        "mustard": $mustard, "surf-green": $surf-green,  "maillot-jaune": $maillot-jaune,
        "caribe": $caribe, "chartreuse": $chartreuse, "mediterranean-red": $mediterranean-red);

// Define the increment.
$i: 1;

  @each $design_tint in map-keys($tint) {
    $tintvar: map-get($tint, $design_tint);
    @if $i < 10 {
    .bg_tint_0#{$i} {
        background-color: $tintvar;
     }
    }
    @else {
      .bg_tint_#{$i} {
        background-color: $tintvar;
     }
    }
    // Now increment.
    $i: $i + 1;
  }
  
   @each $design_tint in map-keys($tint) {
    $tintvar: map-get($tint, $design_tint);
    &.bg-tint-#{$design_tint} {
        background-color: $tintvar;
    }
   }

SassMeister-output.css

.bg_tint_01 {
  background-color: #7f8c8d; }

.bg_tint_02 {
  background-color: #b72898; }

.bg_tint_03 {
  background-color: #e04604; }

.bg_tint_04 {
  background-color: #6a8500; }

.bg_tint_05 {
  background-color: #491f70; }

.bg_tint_06 {
  background-color: #02b4ce; }

.bg_tint_07 {
  background-color: #c0392b; }

.bg_tint_08 {
  background-color: #16a085; }

.bg_tint_09 {
  background-color: #c3a918; }

.bg_tint_10 {
  background-color: #02aab3; }

.bg_tint_11 {
  background-color: #f0de16; }

.bg_tint_12 {
  background-color: #a6c9d1; }

.bg_tint_13 {
  background-color: #c8dc77; }

.bg_tint_14 {
  background-color: #ff513a; }

.bg-tint-greengray {
  background-color: #7f8c8d; }

.bg-tint-pink {
  background-color: #b72898; }

.bg-tint-orange {
  background-color: #e04604; }

.bg-tint-green {
  background-color: #6a8500; }

.bg-tint-purple {
  background-color: #491f70; }

.bg-tint-turquoise {
  background-color: #02b4ce; }

.bg-tint-pomegranate {
  background-color: #c0392b; }

.bg-tint-seafoam {
  background-color: #16a085; }

.bg-tint-mustard {
  background-color: #c3a918; }

.bg-tint-surf-green {
  background-color: #02aab3; }

.bg-tint-maillot-jaune {
  background-color: #f0de16; }

.bg-tint-caribe {
  background-color: #a6c9d1; }

.bg-tint-chartreuse {
  background-color: #c8dc77; }

.bg-tint-mediterranean-red {
  background-color: #ff513a; }