Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav>
  <ul>
    <li class="all-stories">
      <a>All Stories</a>
    </li>
    <li class="dance">
      <a>Dance</a>
    </li>
    <li class="drama">
      <a>Drama</a>
    </li>
    <li class="music">
      <a>Music</a>
    </li>
    <li class="campus-life">
      <a>Campus Life</a>
    </li>
    <li class="alumni">
      <a>Alumni</a>
    </li>
    <li class="history">
      <a>History</a>
    </li>
  </ul>
</nav>

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

@import "compass";
 
 
$navcolors: (
  all-stories: #FF0000,
  dance: #FF8000,
  drama: #FFFF00,
  music: #008000,
  campus-life: #590044,
  alumni: #0000FF,
  history: lighten(#0000FF, 10%),
  
); 

@mixin color-me-bad {
  @each $class, $hex-color in $navcolors {
    .#{$class} {
      background: $hex-color;
    }
  }
}

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

nav {
  width: 320px;
  ul {
    @include color-me-bad;
    li {
      color: white;
      @include box-shadow(inset  0  1px 1px -1px lighten(black, 35%), inset  0 -1px 1px -1px lighten(black, 35%));
      width: 100%;
      height: auto;
      padding: {
        top: .8rem;
        bottom: .8rem;
      }
      list-style-type: none;
      text: {
        align: center;
        transform: uppercase;
      }
    }
  }
}

SassMeister-output.css

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

nav {
  width: 320px;
}
nav ul .all-stories {
  background: #FF0000;
}
nav ul .dance {
  background: #FF8000;
}
nav ul .drama {
  background: #FFFF00;
}
nav ul .music {
  background: #008000;
}
nav ul .campus-life {
  background: #590044;
}
nav ul .alumni {
  background: #0000FF;
}
nav ul .history {
  background: #3333ff;
}
nav ul li {
  color: white;
  -moz-box-shadow: inset 0 1px 1px -1px #595959, inset 0 -1px 1px -1px #595959;
  -webkit-box-shadow: inset 0 1px 1px -1px #595959, inset 0 -1px 1px -1px #595959;
  box-shadow: inset 0 1px 1px -1px #595959, inset 0 -1px 1px -1px #595959;
  width: 100%;
  height: auto;
  padding-top: .8rem;
  padding-bottom: .8rem;
  list-style-type: none;
  text-align: center;
  text-transform: uppercase;
}

SassMeister-rendered.html

<nav>
  <ul>
    <li class="all-stories">
      <a>All Stories</a>
    </li>
    <li class="dance">
      <a>Dance</a>
    </li>
    <li class="drama">
      <a>Drama</a>
    </li>
    <li class="music">
      <a>Music</a>
    </li>
    <li class="campus-life">
      <a>Campus Life</a>
    </li>
    <li class="alumni">
      <a>Alumni</a>
    </li>
    <li class="history">
      <a>History</a>
    </li>
  </ul>
</nav>