Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
// ----

@import "compass";

@mixin cta($color, $hover, $active) {
  background-color: $color;
  color: contrast-color($color, #444, #FFF, 50%);
    &:hover {
      background-color: lighten($color, $hover);
    }

    &:active,
    &:focus {
      background-color: lighten($color, $active);
    }

}

$colors: red #D23A37 8% 16%, green #00B638 5% 10%, blue #0073CC 7% 14%, yellow #FFEB00 15% 30%;

@each $color in $colors {
    $classname:     'cta-' + nth($color, 1);
    $colordefault:  nth($color, 2);
    $colorhover:    nth($color, 3);
    $coloractive:   nth($color, 4);
    .#{$classname} {
        @include cta($colordefault, $colorhover, $coloractive);
    }
}

SassMeister-output.css

.cta-red {
  background-color: #d23a37;
  color: #444444;
}
.cta-red:hover {
  background-color: #d95b58;
}
.cta-red:active, .cta-red:focus {
  background-color: #e17c7a;
}

.cta-green {
  background-color: #00b638;
  color: white;
}
.cta-green:hover {
  background-color: #00d040;
}
.cta-green:active, .cta-green:focus {
  background-color: #00e948;
}

.cta-blue {
  background-color: #0073cc;
  color: white;
}
.cta-blue:hover {
  background-color: #0087f0;
}
.cta-blue:active, .cta-blue:focus {
  background-color: #1499ff;
}

.cta-yellow {
  background-color: #ffeb00;
  color: #444444;
}
.cta-yellow:hover {
  background-color: #fff14d;
}
.cta-yellow:active, .cta-yellow:focus {
  background-color: #fff799;
}