Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="alert error">
    <p>Error</p>
  </div>
  <div class="alert success">
    <p>Success</p>
  </div>
  <div class="alert info">
    <p>Info</p>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

// Error settings
$error: #DB4437;
$success: #a9cf54;
$info: #477dca;
$warning: #F4B400;

.container {
  margin: 0 auto;
  max-width: 40em;
  overflow: hidden;
}

// Alert Styles
// .alert {
//   border-radius: 5px;
//   margin-bottom: 1em;
//   overflow: hidden;
//   padding: 1em;
//   text-align: center;
//   &.error {
//     background: $error;
//     border: 1px solid darken($error, 20%);
//     &:hover {
//       background: lighten($error, 10%);
//     }
//   }
//   &.success {
//     background: $success;
//     border: 1px solid darken($success, 20%);
//     &:hover {
//       background: lighten($success, 10%);
//     }    
//   }
//   &.info {
//     background: $info;
//     border: 1px solid darken($info, 20%);
//     &:hover {
//       background: lighten($info, 10%);
//     }    
//   }
// }

// Alert placeholder selector
%alert {
    border-radius: 5px;
    margin-bottom: 1em;
    overflow: hidden;
    padding: 1em;
    text-align: center;    
}

$alerts: 
  (error, $error, 1px, white),
  (success, $success, 1px, white),
  (info, $info, 1px, white);
  
  // error: ($error, 1px),  
  // success: $success,
  // info: $info,

@each $alert, $bgcolor, $border-width, $text-color in $alerts {
  .alert.#{$alert} {
    @extend %alert;
    background: $bgcolor;
    border: $border-width dotted darken($bgcolor, 20%);
    & p {
      color: $text-color;
    }
  }
  .alert.#{$alert}:hover {
    // background: lighten($bgcolor, 10%);
  }
}

// $alerts: (error, red, 1px),
//         (success, green, 2px),
//         (info, blue, 2px);
// @each $alert, $bgcolor, $foo in $alerts {
//   .alert.#{$alert} {
//     border: $foo solid $bgcolor;
//   }
// }

SassMeister-output.css

.container {
  margin: 0 auto;
  max-width: 40em;
  overflow: hidden;
}

.alert.error, .alert.success, .alert.info {
  border-radius: 5px;
  margin-bottom: 1em;
  overflow: hidden;
  padding: 1em;
  text-align: center;
}

.alert.error {
  background: #db4437;
  border: 1px dotted #92241a;
}
.alert.error p {
  color: white;
}

.alert.success {
  background: #a9cf54;
  border: 1px dotted #739429;
}
.alert.success p {
  color: white;
}

.alert.info {
  background: #477dca;
  border: 1px dotted #264d85;
}
.alert.info p {
  color: white;
}

SassMeister-rendered.html

<div class="container">
  <div class="alert error">
    <p>Error</p>
  </div>
  <div class="alert success">
    <p>Success</p>
  </div>
  <div class="alert info">
    <p>Info</p>
  </div>
</div>