A CodePen by Bermon Painter. Placeholder directive

index.html

<h1>Placeholder Directive</h1>
<p>We've started cleaning up our CSS but it's still not as clean as it needs to be. The placeholder directive is basically a silent class. It's output in our CSS, but in a comma delimted fashion so the output is just a bit cleaner.</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="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="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) {
  @extend %message;
  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 {
  @include message-box($error-color);
}

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

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