A CodePen by Bermon Painter. Mixin - Complex - CSS Version

index.html

<h1>Mixin - Complex CSS Version</h1>
<p>We want to create a series of notification boxes. It might look something like this with normal CSS..</p>

<div class="message 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;
}

.message {
  float: left;
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  margin: 0 10px;
  font-size: 14px;
  padding: 20px;
  position: relative;
  width: 200px;
}
.message p {
  margin: 0;
}
.message .close {
  font-weight: bold;
  position: absolute;
  top: 5px;
  right: 8px;
}

.error {
  background-color: #c15858;
  border-color: #5d2323;
  color: #381515;
}
.error .close {
  color: #5d2323;
}

.caution {
  background-color: #f2cf2f;
  border-color: #806a08;
  color: #504305;
}
.caution .close {
  color: #806a08;
}

.success {
  background-color: #89a989;
  border-color: #415841;
  color: #2b3b2b;
}
.success .close {
  color: #415841;
}