Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="message-info">You might want to know this.</p>
<p class="message-error">There might be something wrong.</p>
<p class="message-alert">You should pay attention!</p>
<p class="message-valid">Everything is okay, move on.</p>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----

// Configuration variables
// Type name | color scheme
$message-types: (
  error : #b94a48,
  alert : #c09853,
  valid : #468847,
  info  : #3a87ad
) !default;
 
// Placeholder for static values
%message {
	  padding: .5em;
	  margin: .5em;
	  border-radius: .15em;
	  border: 1px solid;
}
 
// Mixin for dynamic values
// Extending the placeholder
@mixin message($color) {
  @extend %message;
  color: $color;
  background: lighten($color, 38%);
  border-color: lighten($color, 20%);
}
 
// Loop doing all the dumping
@each $type, $color in $message-types {
  .message-#{$type} {
    @include message($color);
  }
}

SassMeister-output.css

.message-error, .message-alert, .message-valid, .message-info {
  padding: .5em;
  margin: .5em;
  border-radius: .15em;
  border: 1px solid;
}

.message-error {
  color: #b94a48;
  background: #efd5d4;
  border-color: #d59392;
}

.message-alert {
  color: #c09853;
  background: #f4ede1;
  border-color: #dbc59e;
}

.message-valid {
  color: #468847;
  background: #b6dab7;
  border-color: #7aba7b;
}

.message-info {
  color: #3a87ad;
  background: #bfdcea;
  border-color: #7ab5d3;
}

SassMeister-rendered.html

<p class="message-info">You might want to know this.</p>
<p class="message-error">There might be something wrong.</p>
<p class="message-alert">You should pay attention!</p>
<p class="message-valid">Everything is okay, move on.</p>