Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="notification confirm">Confirmation</p>
<p class="notification warning">Warning</p>
<p class="notification alert">Alert</p>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

// From: http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass

@function text-color($color) {
  @if (lightness($color) > 50) {
    @return #333; // Lighter backgorund, return dark color
  } @else {
    @return #fff; // Darker background, return light color
  }
}

$confirm: hsla(101, 72%, 37%, 1);  // Green
$warning: #ffc53a;                 // Yellow
$alert: rgb(172, 34, 34);          // Red

%notification {
  border-radius: 10px;
  display: block;
  font-size:100%;
  font-family: sans-serif;
  padding: 1em 2em;
  margin: 1em auto;
  max-width: 200px;
  text-align: center;
}

.notification {
  @extend %notification;
}
.confirm {
  background: $confirm;
  color: text-color($confirm);
}
.warning {
  background: $warning;
  color: text-color($warning);
}
.alert {
  background: $alert;
  color: text-color($alert);
}

SassMeister-output.css

.notification {
  border-radius: 10px;
  display: block;
  font-size: 100%;
  font-family: sans-serif;
  padding: 1em 2em;
  margin: 1em auto;
  max-width: 200px;
  text-align: center;
}

.confirm {
  background: #45a21a;
  color: white;
}

.warning {
  background: #ffc53a;
  color: #333333;
}

.alert {
  background: #ac2222;
  color: white;
}

SassMeister-rendered.html

<p class="notification confirm">Confirmation</p>
<p class="notification warning">Warning</p>
<p class="notification alert">Alert</p>