Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="message error">
  <p>
    Message error 
  </p>
</div>
<div class="message warning">
  <p>
    warning message
  </p>
</div>
<div class="message status">
  <p>
    status message
  </p>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.0-beta.6)
// ----

$message: (
  status: (
    background: #d5edf8,
    border:     #92cae4,
    color:      #205791,
  ),
  warning: (
    background: #fff6bf,
    border:     #ffd324,
    color:      #514721,
  ),
  error: (
    background: #fbe3e4,
    border:     #fbc2c4,
    color:      #8a1f11,
  ),
) !default;

.message {
  border: 1px transparent solid;
  padding: 1em .5em;
  margin-bottom: 1em;
  @each $msg in $message {
    $_typ: nth($msg, 1);
    $_value: nth($msg, 2);
    &.#{$_typ} {
      background: map-get($_value, background);
      border-color: map-get($_value, border);
      color: map-get($_value, color);
    }
  }
}

SassMeister-output.css

.message {
  border: 1px transparent solid;
  padding: 1em 0.5em;
  margin-bottom: 1em;
}

.message.status {
  background: #d5edf8;
  border-color: #92cae4;
  color: #205791;
}

.message.warning {
  background: #fff6bf;
  border-color: #ffd324;
  color: #514721;
}

.message.error {
  background: #fbe3e4;
  border-color: #fbc2c4;
  color: #8a1f11;
}

SassMeister-rendered.html

<div class="message error">
  <p>
    Message error 
  </p>
</div>
<div class="message warning">
  <p>
    warning message
  </p>
</div>
<div class="message status">
  <p>
    status message
  </p>
</div>