Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav class="nav">
  <ul>
    <li class="nav__item">
      <a href="#" class="nav__item__link">The Workshop</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__item__link">2013 Schedule</a>
    </li>
    <li class="nav__item nav__item__link--active">
      <a href="#" class="nav__item__link">About CSSWizardry</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__item__link">Contact</a>
    </li>
  </ul>
</nav>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

.nav {
 &__item {
   
   display: block;
   float: left;
   &__link {
     display: block;
     padding: 10px;
     color: #000;
     text-decoration: none;
     text-transform: uppercase;
     border: 1px solid #eee;
     border-right-width: none;
     &--active & {
       text-decoration: underline;
     }
     &:hover {
       background-color: #f00;
     }
   }
 } 
}

SassMeister-output.css

.nav__item {
  display: block;
  float: left;
}

.nav__item__link {
  display: block;
  padding: 10px;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid #eee;
  border-right-width: none;
}

.nav__item__link--active .nav__item__link {
  text-decoration: underline;
}

.nav__item__link:hover {
  background-color: #f00;
}

SassMeister-rendered.html

<nav class="nav">
  <ul>
    <li class="nav__item">
      <a href="#" class="nav__item__link">The Workshop</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__item__link">2013 Schedule</a>
    </li>
    <li class="nav__item nav__item__link--active">
      <a href="#" class="nav__item__link">About CSSWizardry</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__item__link">Contact</a>
    </li>
  </ul>
</nav>