Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="nav nav--sticky">
  <li class="nav__item"><a href="" class="nav__link">Item 1</a></li>
  <li class="nav__item"><a href="" class="nav__link">Item 2</a></li>
  <li class="nav__item"><a href="" class="nav__link">Item 3</a></li>
  <li class="nav__item nav__item--active"><a href="" class="nav__link">Item 4</a></li>
  <li class="nav__item"><a href="" class="nav__link">Item 5</a></li>
</ul>

SassMeister-input.scss

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

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

$nav-default: #FFFFFF;
$nav-active: #37BC9B; 
$nav-bg:  #434A54;
 
.nav {
  display:block;
  list-style: none;
  font-family: "Open Sans";
  font-weight: 700;

    &__item {
    margin-right: 1em;
    float: left;
    border-radius: 0.5em;
    background: $nav-bg;
    
    &--active {
      .nav__link {
        color: $nav-active; // active state
      }
    }
  }
  
  &__link {
    display: block;
    padding: 1em 1.5em;
    color: $nav-default; // normal state
    text-decoration: none;
    &:hover {
      color: $nav-active;
    }
  }
  
  &--sticky {
    positon: fixed;
  }
}

SassMeister-output.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
.nav {
  display: block;
  list-style: none;
  font-family: "Open Sans";
  font-weight: 700;
}
.nav__item {
  margin-right: 1em;
  float: left;
  border-radius: 0.5em;
  background: #434a54;
}
.nav__item--active .nav__link {
  color: #37bc9b;
}
.nav__link {
  display: block;
  padding: 1em 1.5em;
  color: white;
  text-decoration: none;
}
.nav__link:hover {
  color: #37bc9b;
}
.nav--sticky {
  positon: fixed;
}

SassMeister-rendered.html

<ul class="nav nav--sticky">
  <li class="nav__item"><a href="" class="nav__link">Item 1</a></li>
  <li class="nav__item"><a href="" class="nav__link">Item 2</a></li>
  <li class="nav__item"><a href="" class="nav__link">Item 3</a></li>
  <li class="nav__item nav__item--active"><a href="" class="nav__link">Item 4</a></li>
  <li class="nav__item"><a href="" class="nav__link">Item 5</a></li>
</ul>