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 class="alert warning">
    <p>Info</p>
  </div>  
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

// Color settings
$color-red: #DB4437;
$color-green: #a9cf54;
$color-blue: #477dca;
$color-yellow: #F4B400;
$color-white: #ffffff;
$color-gray: #aaaaaa;

// Error settings
$alert-default: $color-gray;
$alert-error: $color-red;
$alert-success: $color-green;
$alert-info: $color-blue;
$alert-warning: $color-yellow;

// Spacing settings
$base-unit: 1em;

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

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

// Sets up the alert "sass map" 
// to add a new alert, just add a new
// key value pair to the bottom and update 
// the markup.
$alerts: (
  error: $alert-error,
  success: $alert-success,
  info: $alert-info,
  warning: $alert-warning
);

// Loops through the sass map keys/values 
// and compiles the proper CSS
@each $alert, $bgcolor in $alerts {
  .alert.#{$alert} {
    @extend %panel;
    background: $bgcolor;
    border: 1px solid darken($bgcolor, 20%);
    color: $color-white;
  }
  .alert.#{$alert}:hover {
    background: lighten($bgcolor, 10%);
  }
}

SassMeister-output.css

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

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

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

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

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

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

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

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

.alert.warning {
  background: #f4b400;
  border: 1px solid #8e6900;
  color: white;
}

.alert.warning:hover {
  background: #ffc728;
}

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 class="alert warning">
    <p>Info</p>
  </div>  
</div>