Generated by SassMeister.com.

SassMeister-input.scss

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

%message {
  padding: .5em;
  margin-bottom: .5em;
  border-radius: .15em;
  border: 1px solid;
}



@mixin message($color) {
  @extend %message;
  color: $color;
  border-color: lighten($color, 20%);
  background: lighten($color, 40%);
}

$message-types: (
  error   :  #b94a48,
  valid   :  #468847,
  warning :  #c09853,
  info    :  #3a87ad
) !default;
 
@each $type, $color in $message-types {
  .message-#{$type} {
    @include message($color);
    /* #{$type}
    This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. 
 */

  }
}

SassMeister-output.css

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

.message-error {
  color: #b94a48;
  border-color: #d59392;
  background: #f1dcdc;
   /* error
   This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. 
*/
}

.message-valid {
  color: #468847;
  border-color: #7aba7b;
  background: #bdddbd;
   /* valid
   This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. 
*/
}

.message-warning {
  color: #c09853;
  border-color: #dbc59e;
  background: #f7f1e8;
   /* warning
   This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. 
*/
}

.message-info {
  color: #3a87ad;
  border-color: #7ab5d3;
  background: #c7e0ec;
   /* info
   This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. 
*/
}