Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="message message--warning">
  <p>This is a message warning</p>
  <button class="message__button_close">Close</button>
</div>
<div class="message message--success">
  <p>This is a message warning</p>
  <button class="message__button_close">Close</button>
</div>
<div class="message message--info">
  <p>This is a message warning</p>
  <button class="message__button_close">Close</button>
</div>

SassMeister-input.scss

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

// Configuration variables
$message: (
  warning : #b94a48,
  success : #468847,
  info    : #3a87ad
)!default;

.message {
  position: relative;
  padding: .5em;
  margin-bottom: .5em;
  &__button_close {
    position: absolute;
    top: .5em;
    right: .5em;
  }
}

@each $type, $color in $message {
  .message--#{$type} {
    background: $color;
  }
}

SassMeister-output.css

.message {
  position: relative;
  padding: .5em;
  margin-bottom: .5em;
}
.message__button_close {
  position: absolute;
  top: .5em;
  right: .5em;
}

.message--warning {
  background: #b94a48;
}

.message--success {
  background: #468847;
}

.message--info {
  background: #3a87ad;
}

SassMeister-rendered.html

<div class="message message--warning">
  <p>This is a message warning</p>
  <button class="message__button_close">Close</button>
</div>
<div class="message message--success">
  <p>This is a message warning</p>
  <button class="message__button_close">Close</button>
</div>
<div class="message message--info">
  <p>This is a message warning</p>
  <button class="message__button_close">Close</button>
</div>