Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="row hero"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

.hero {
    width: 100%;
    height: 500px;
    background: url('http://placesheen.com/1200/500') center center no-repeat;
    background-size:cover;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 508px;
        background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,1));
    }
}
.container{
  max-width: 900px;
  margin: 0 auto;
  height:800px;
}

SassMeister-output.css

.hero {
  width: 100%;
  height: 500px;
  background: url("http://placesheen.com/1200/500") center center no-repeat;
  background-size: cover;
}
.hero:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 508px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), white);
}

.container {
  max-width: 900px;
  margin: 0 auto;
  height: 800px;
}

SassMeister-rendered.html

<div class="container">
  <div class="row hero"></div>
</div>