Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="warning">Don't do it</div>
<div class="error">That is just wrong</div>
<div class="success">Yes!!!</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@mixin message($color) {
  width: 30%;
  margin: 30px auto;
  height: 30px;
  font: 20px sans-serif;
  text-align: center;
  background-color: fade-out($color, .7);
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
}

.warning {
  @include message(yellow);
}

.error {
  @include message(red);
}

.success {
  @include message(green);
}

SassMeister-output.css

.warning {
  width: 30%;
  margin: 30px auto;
  height: 30px;
  font: 20px sans-serif;
  text-align: center;
  background-color: rgba(255, 255, 0, 0.3);
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
}

.error {
  width: 30%;
  margin: 30px auto;
  height: 30px;
  font: 20px sans-serif;
  text-align: center;
  background-color: rgba(255, 0, 0, 0.3);
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
}

.success {
  width: 30%;
  margin: 30px auto;
  height: 30px;
  font: 20px sans-serif;
  text-align: center;
  background-color: rgba(0, 128, 0, 0.3);
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
}

SassMeister-rendered.html

<div class="warning">Don't do it</div>
<div class="error">That is just wrong</div>
<div class="success">Yes!!!</div>