Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="product">
  <img src="http://placehold.it/250x250">
  <h3>Product</h3>
</div>
<div class="product product--sold-out">
  <img src="http://placehold.it/250x250">
  <h3>Product</h3>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

.product--sold-out {
  position: relative;
  &:before {
  content: '';
  background-color: rgba(red,0.2);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  }
  &:after {
    content: 'Sold Out';
    position: absolute;
    top: 0;
    left: 0;
  }
}


// generic stuff
body {
  text-align: center;
}
.product {
  display: inline-block;
  text-align: center;
  border: 1px solid;
}

SassMeister-output.css

.product--sold-out {
  position: relative;
}
.product--sold-out:before {
  content: '';
  background-color: rgba(255, 0, 0, 0.2);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.product--sold-out:after {
  content: 'Sold Out';
  position: absolute;
  top: 0;
  left: 0;
}

body {
  text-align: center;
}

.product {
  display: inline-block;
  text-align: center;
  border: 1px solid;
}

SassMeister-rendered.html

<div class="product">
  <img src="http://placehold.it/250x250">
  <h3>Product</h3>
</div>
<div class="product product--sold-out">
  <img src="http://placehold.it/250x250">
  <h3>Product</h3>
</div>