Generated by SassMeister.com.

input.scss

@mixin focus() {
  &:focus,
  &:hover {
    @content;
  }
}

$btn-saturate-default: 25%;
$btn-lighten-default: 4%;
$btn-darken-default: 5%; // see also ecomm/molecules/button.scss

@mixin btn-saturate-or-lighten($color, $amount: $btn-saturate-default) {
  // `saturate(color, percentage)` can, depending on `color` and `percentage`, return `color`
  // This function enhances `saturate()` with a `lighten()` fallback.

  $saturated: saturate($color, $amount);
  $lightened: lighten($color, $amount * $btn-lighten-default / $btn-saturate-default);
  $result: $color;

  @if $saturated != $color {
    $result: $saturated;
  } @else if $lightened != $color {
    $result: $lightened;
  }

  background: $result;
}

@mixin btn-darken($color) {
  background: darken($color, $btn-darken-default);
}

@mixin btn-lighten($color) {
  background: lighten($color, $btn-lighten-default);
}

@mixin btn-default-hover-and-active($color) {
  @include focus() {
    @include btn-saturate-or-lighten($color);
  }

  &:active {
    @include btn-darken($color);
  }
}

.my-button {
    $color: red;
    background: $color;
    
    @include btn-default-hover-and-active($color);
}

output.css

.my-button {
  background: red;
}
.my-button:focus, .my-button:hover {
  background: #ff1414;
}
.my-button:active {
  background: #e60000;
}

settings.json

{
  "sass": {
    "compiler": "Ruby Sass/3.7.4",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}