Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="message-success">
ceshi
</div>
<div class="message-error">
ceshi
</div>
<div class="message-warn">
ceshi
</div>
<div class="message-info">
ceshi
</div>

SassMeister-input.scss

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

$message-colors: (
  success: (
    text: #468847,
    background: #dff0d8,
    border: darken(adjust-hue(#dff0d8, -10), 5%)
  ),
  error: (
    text: #b94a48,
    background: #f2dede,
    border: darken(adjust-hue(#f2dede, -10), 3%)
  ),
  warn: (
    text: #c09853,
    background: #fcf8e3,
    border: darken(adjust-hue(#fcf8e3, -10), 3%)
  ),
  info: (
    text: #3a87ad,
    background: #d9edf7,
    border: darken(adjust-hue(#d9edf7, -10), 7%)
  )
) !default;


%message {
  margin-bottom: 15px;
  padding: 8px 13px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
}

@each $type, $colors in $message-colors {
  .message-#{$type} {
    @extend %message;
    border-color: map-get($colors, border);
    background-color: map-get($colors, background);
    color: map-get($colors, text);

    a {
      color: darken(map-get($colors, text), 10%);
    }
  }
}
%box{
  width:100px;
  height:30px;
}
.alert{
  @extend %box;
  background:#dff0d8;
  border: 2px solid darken(adjust-hue(#dff0d8, 180), 10%)
}

SassMeister-output.css

.message-success, .message-error, .message-warn, .message-info {
  margin-bottom: 15px;
  padding: 8px 13px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
}

.message-success {
  border-color: #d6e9c6;
  background-color: #dff0d8;
  color: #468847;
}
.message-success a {
  color: #356635;
}

.message-error {
  border-color: #eed3d7;
  background-color: #f2dede;
  color: #b94a48;
}
.message-error a {
  color: #953b39;
}

.message-warn {
  border-color: #fbeed5;
  background-color: #fcf8e3;
  color: #c09853;
}
.message-warn a {
  color: #a47e3c;
}

.message-info {
  border-color: #bce8f1;
  background-color: #d9edf7;
  color: #3a87ad;
}
.message-info a {
  color: #2d6987;
}

.alert {
  width: 100px;
  height: 30px;
}

.alert {
  background: #dff0d8;
  border: 2px solid #d4b3e2;
}

SassMeister-rendered.html

<div class="message-success">
ceshi
</div>
<div class="message-error">
ceshi
</div>
<div class="message-warn">
ceshi
</div>
<div class="message-info">
ceshi
</div>