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 placeholder selector
%alert {
    border-radius: 5px;
    margin-bottom: 1em;
    overflow: hidden;
    padding: 1em;
    text-align: center;    
}

$alerts: (
  error: $error,
  success: $success,
  info: $info,
);

@each $alert, $bgcolor, $text in $alerts {
  .alert.#{$alert} {
    @extend %alert;
    background: $bgcolor;
    color: $text;
    border: 1px solid darken($bgcolor, 20%);
  }
  .alert.#{$alert}:hover {
    background: lighten($bgcolor, 10%);
  }
}

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 solid #92241a;
}

.alert.error:hover {
  background: #e36c62;
}

.alert.success {
  background: #a9cf54;
  border: 1px solid #739429;
}

.alert.success:hover {
  background: #bdda7c;
}

.alert.info {
  background: #477dca;
  border: 1px solid #264d85;
}

.alert.info:hover {
  background: #6f99d5;
}

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>