Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav class="site-nav">
	<ul class="main-menu">
		<li class="main-menu__item main-menu__item_home">
			<a class="main-menu__anchor" href="#">HOME</a>
		</li>
		<li class="main-menu__item main-menu__item_products">
			<a class="main-menu__anchor" href="#">PRODUCTS</a>
		</li>
		<li class="main-menu__item main-menu__item_about">
			<a class="main-menu__anchor" href="#">ABOUT</a>
		</li>
		<li class="main-menu__item main-menu__item_blog">
			<a class="main-menu__anchor" href="#">BLOG</a>
		</li>
		<li class="main-menu__item main-menu__item_contact">
			<a class="main-menu__anchor" href="#">CONTACT</a>
		</li>
	</ul>
</nav>

SassMeister-input.scss

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

@mixin rgba_bg($color, $percent: 1) {
    //background: $color;
    background: rgba($color, $percent);
}
	

	$site_nav_item_opacity: (
		home:( #000000 , 1 ),
		products:( #0a0a0a,  0.9 ),
		about:( #141414, 0.8 ),
		blog:( #1e1e1e, 0.7 ),
		contact:( #282828,   0.6 ),
	);


.main-menu {
  width: 100%;
  margin: 0;
  padding:0;
  list-style:none;
  
	@each $item, $hex_opacity in $site_nav_item_opacity {
	  // Child number
	  &__item_#{$item} {
	     // Child number: opacity
	     @include rgba_bg( nth($hex_opacity, 1), nth($hex_opacity, 2) );
	  }
	}
	
	&__item {
	  float: left;
	 display: table-cell;
	 vertical-align:middle;
	  width: percentage(1/5);
	  height: 60px;
	  padding:10px 20px;
	  
	  a {
	    text-decoration:none;
	    color: #fff;
	    font-family: sans-serif;
	  }
	}
	
}

*, *:before,*:after {
  box-sizing: border-box;
}

SassMeister-output.css

.main-menu {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none; }
  .main-menu__item_home {
    background: black; }
  .main-menu__item_products {
    background: rgba(10, 10, 10, 0.9); }
  .main-menu__item_about {
    background: rgba(20, 20, 20, 0.8); }
  .main-menu__item_blog {
    background: rgba(30, 30, 30, 0.7); }
  .main-menu__item_contact {
    background: rgba(40, 40, 40, 0.6); }
  .main-menu__item {
    float: left;
    display: table-cell;
    vertical-align: middle;
    width: 20%;
    height: 60px;
    padding: 10px 20px; }
    .main-menu__item a {
      text-decoration: none;
      color: #fff;
      font-family: sans-serif; }

*, *:before, *:after {
  box-sizing: border-box; }

SassMeister-rendered.html

<nav class="site-nav">
	<ul class="main-menu">
		<li class="main-menu__item main-menu__item_home">
			<a class="main-menu__anchor" href="#">HOME</a>
		</li>
		<li class="main-menu__item main-menu__item_products">
			<a class="main-menu__anchor" href="#">PRODUCTS</a>
		</li>
		<li class="main-menu__item main-menu__item_about">
			<a class="main-menu__anchor" href="#">ABOUT</a>
		</li>
		<li class="main-menu__item main-menu__item_blog">
			<a class="main-menu__anchor" href="#">BLOG</a>
		</li>
		<li class="main-menu__item main-menu__item_contact">
			<a class="main-menu__anchor" href="#">CONTACT</a>
		</li>
	</ul>
</nav>