A CodePen by Bermon Painter. @extend directive

index.html

<h1>@extend Directive</h1>
<p>One issue with using mixins is it can create CSS & HTML that's not very DRY and may bloat your final output. As an alternative you can use the @extend directive, which outputs CSS that is a bit more natural.</p>

<div class="error">
  <p>Something terrible happened with the system and we can't proceed.</p>
  <div class="close">x</div>
</div>

<div class="message caution">
  <p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>
  <div class="close">x</div>
</div>

<div class="message success">
  <p>Something great happened. We just wanted to let you know.</p>
  <div class="close">x</div>
</div>

style.scss

@import "compass";
h1 {
  font-size: 20px; 
}

$error-color: #c15858;
$caution-color: #f2cf2f;
$success-color: #89a989;

@mixin rounded-corners($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

@mixin message-box($color) {
  background-color: $color;
  border-color: darken($color, 30%);
  color: darken($color, 40%);
  .close {
    color: darken($color, 30%);
  }
}

.message {
  float: left;
  border-width: 1px;
  border-style: solid;
  @include rounded-corners(8px);
  margin: 0 10px;
  font-size: 14px;
  padding: 20px;
  position: relative;
  width: 200px;
  p {
    margin: 0;
  }
  .close {
    font-weight: bold;
    position: absolute;
      top: 5px;
      right: 8px;
  }
}

.error {
  @extend .message;
  @include message-box($error-color);
}

.caution {
  @include message-box($caution-color);
}

.success {
  @include message-box($success-color);
}