[SCSS] Opacity of the background color for before

before.css

* {
  padding: 0;
  margin: 0;
}

.bg-cover, .photobg {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.photobg {
  height: 460px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 50px auto;
  background-image: url(https://images.unsplash.com/photo-1556910633-5099dc3971e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1225&q=80);
  position: relative;
}
.photobg:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.before-opacity-0:before {
  opacity: 0;
}

.before-opacity-10:before {
  opacity: 0.1;
}

.before-opacity-20:before {
  opacity: 0.2;
}

.before-opacity-30:before {
  opacity: 0.3;
}

.before-opacity-40:before {
  opacity: 0.4;
}

.before-opacity-50:before {
  opacity: 0.5;
}

.before-opacity-60:before {
  opacity: 0.6;
}

.before-opacity-70:before {
  opacity: 0.7;
}

.before-opacity-80:before {
  opacity: 0.8;
}

.before-opacity-90:before {
  opacity: 0.9;
}

.before-opacity-100:before {
  opacity: 1;
}

.before-black-bg:before {
  background-color: #000;
}

.before-navy-bg:before {
  background-color: #14213D;
}

.before-yellow-bg:before {
  background-color: #FCA311;
}

.before-light-bg:before {
  background-color: #E5E5E5;
}

.before-white-bg:before {
  background-color: #ffffff;
}

before.scss

* {
  padding: 0;
  margin: 0;
}

.bg-cover {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.photobg {
  height: 460px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 50px auto;
  background-image: url(https://images.unsplash.com/photo-1556910633-5099dc3971e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1225&q=80);
  @extend .bg-cover;
  position: relative;
  
  &:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}

$before-opacity : 0;

@while $before-opacity <= 1 {
  .before-opacity-#{round($before-opacity*100)} {
    &:before {
      opacity: $before-opacity;
    }
  }
  $before-opacity : $before-opacity + 0.1;
}

$colors: (
  black: #000,
  navy: #14213D,
  yellow: #FCA311,
  light: #E5E5E5,
  white: #ffffff
);

@each $name, $hex in $colors {
  .before-#{$name}-bg {
    &:before {
      background-color: $hex;
    }
  }
}

index.html

<section class="photobg before-navy-bg before-opacity-80"></section>

<section class="photobg before-yellow-bg before-opacity-70"></section>

<section class="photobg before-black-bg before-opacity-40"></section>

<section class="photobg before-light-bg before-opacity-50"></section>

<section class="photobg before-white-bg before-opacity-70"></section>