State color changes mixin

SassMeister-input.scss

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

$color-state-modifier: 10%;

@mixin state-color-changes($this-color, $properties...) {
    @each $prop in $properties {
      #{$prop}: $this-color;
    }

    &:hover {
        @each $prop in $properties {
            #{$prop}: darken($this-color, $color-state-modifier);
        }
    }
        
    &:active {
        @each $prop in $properties {
            #{$prop}: lighten($this-color, $color-state-modifier);
        }
    }
}

button {
    @include state-color-changes(
        #f00,
        background,
        color
    );
}

a {
    @include state-color-changes(
        #f0f,
        color
    );
}

SassMeister-output.css

button {
  background: #f00;
  color: #f00;
}
button:hover {
  background: #cc0000;
  color: #cc0000;
}
button:active {
  background: #ff3333;
  color: #ff3333;
}

a {
  color: #f0f;
}
a:hover {
  color: #cc00cc;
}
a:active {
  color: #ff33ff;
}