$base-spacing: 1.5em !default;
$alert-color: #fff6bf !default;
$error-color: #fbe3e4 !default;
$notice-color: #e5edf8 !default;
$success-color: #e6efc2 !default;

@mixin flash($color) {
  background-color: $color;
  color: darken($color, 60%);
  display: block;
  margin-bottom: $base-spacing / 2;
  padding: $base-spacing / 2;
  text-align: center;

  a {
    color: darken($color, 70%);
    text-decoration: underline;

    &:focus,
    &:hover {
      color: darken($color, 90%);
    }
  }
}

.flash-alert {
  @include flash($alert-color);
}

.flash-error {
  @include flash($error-color);
}

.flash-notice {
  @include flash($notice-color);
}

.flash-success {
  @include flash($success-color);
}

$base-spacing: 1.5em !default;
$flashes: (
  "alert": #fff6bf,
  "error": #fbe3e4,
  "notice": #e5edf8,
  "success": #e6efc2,
) !default;

@each $flash-type, $color in $flashes {
  .flash-#{$flash-type} {
    background-color: $color;
    color: shade($color, 60%);
    display: block;
    margin-bottom: $base-spacing / 2;
    padding: $base-spacing / 2;
    text-align: center;

    a {
      color: shade($color, 70%);
      text-decoration: underline;

      &:focus,
      &:hover {
        color: shade($color, 90%);
      }
    }
  }
}

Switch flashes to use Sass maps
Switch flashes to use Sass maps
