Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="Flash Flash--warning">Here is a warning!</div>
<div class="Flash Flash--info">Boring info.</div>
<div class="Flash Flash--success">You did something right!</div>
<div class="Flash Flash--danger">DANGER!</div>

SassMeister-input.scss

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

//pre-existing color vars
$warning: orange;
$info: blue;
$success: green;
$danger: red;

// teensy bit o'styling
.Flash {
  color: white;
  display: block;
  font-family: "Helvetica", sans-serif;
  padding: 20px;
  text-transform: uppercase;
}

// flash list
$flashes: (warning $warning),
          (info $info),
          (success $success),
          (danger $danger);

// part that makes it work
@each $status in $flashes {
  .Flash--#{nth($status, 1)} {
    background: nth($status, 2);
  }
}

SassMeister-output.css

.Flash {
  color: white;
  display: block;
  font-family: "Helvetica", sans-serif;
  padding: 20px;
  text-transform: uppercase;
}

.Flash--warning {
  background: orange;
}

.Flash--info {
  background: blue;
}

.Flash--success {
  background: green;
}

.Flash--danger {
  background: red;
}

SassMeister-rendered.html

<div class="Flash Flash--warning">Here is a warning!</div>
<div class="Flash Flash--info">Boring info.</div>
<div class="Flash Flash--success">You did something right!</div>
<div class="Flash Flash--danger">DANGER!</div>