Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="message status">
  Sass 3.3 envoie du poney !
</div>
<div class="message warning">
  Une fois tombé dans Sass,
  il est difficile de revenir en arrière !
</div>
<div class="message error">
  LESS c'est senSass :]
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.3)
// ----

$message-themes: (
  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-themes {
    $_type: nth($msg, 1);
    $_values: nth($msg, 2);
    &.#{$_type} {
      background: map-get($_values, background);
      border-color: map-get($_values, border);
      color: map-get($_values, color);
    }
  }
}

SassMeister-output.css

.message {
  border: 1px transparent solid;
  padding: 1em .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 status">
  Sass 3.3 envoie du poney !
</div>
<div class="message warning">
  Une fois tombé dans Sass,
  il est difficile de revenir en arrière !
</div>
<div class="message error">
  LESS c'est senSass :]
</div>