Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav role='navigation' class="main-nav" id="main-nav">
  <ul id="main-nav-list">
    <li>
      <a href="#">
        <div>
          THE WORKSHOP
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          2013 SCHEDULE
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          ABOUT CSSWIZARDRY
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          CONTACT
        </div>
      </a>
    </li>
  </ul>
</nav>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

* {
  box-sizing: border-box;
}

html {
  font-size: 7px;
}

.main-nav {
border: 1px solid gray;
border-radius: 5px;
max-width: 580px;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #BFBFBF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #BFBFBF 100%);
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: Roboto, Helvetica;
    list-style: none;
    border-radius: 8px;
  }
  li {
    border-right: 1px solid #ccc;
    text-transform: uppercase;
  }
  li:last-child{
    border-right: none;
  }
  a {
    padding: 1.35rem 1.8rem;
    font-size: 1.6rem;
    max-width: 140px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    color: #333;
    &:hover, &:focus {
      background: #ccc;
      color: black;
      svg {
        fill: green; 
      }
      span {
        color: black; 
      }
    }
  }
  span {
    display: block;
    font-size: 1rem;
    font-weight: normal;
    color: #888;
    margin: 0.25rem 0 0 0;
  }
  &.outlines {
    * {
      outline: 1px solid rgba(red, 0.5); 
    }
  }
}

@media (min-width: 1000px) {
  .main-nav {
    a {
      max-width: 500px;
      font-size: 2rem; 
    }
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

html {
  font-size: 7px;
}

.main-nav {
  border: 1px solid gray;
  border-radius: 5px;
  max-width: 580px;
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%);
  /* Opera */
  background-image: -o-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #BFBFBF));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #BFBFBF 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom right, #FFFFFF 0%, #BFBFBF 100%);
}
.main-nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: Roboto, Helvetica;
  list-style: none;
  border-radius: 8px;
}
.main-nav li {
  border-right: 1px solid #ccc;
  text-transform: uppercase;
}
.main-nav li:last-child {
  border-right: none;
}
.main-nav a {
  padding: 1.35rem 1.8rem;
  font-size: 1.6rem;
  max-width: 140px;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  color: #333;
}
.main-nav a:hover, .main-nav a:focus {
  background: #ccc;
  color: black;
}
.main-nav a:hover svg, .main-nav a:focus svg {
  fill: green;
}
.main-nav a:hover span, .main-nav a:focus span {
  color: black;
}
.main-nav span {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  color: #888;
  margin: 0.25rem 0 0 0;
}
.main-nav.outlines * {
  outline: 1px solid rgba(255, 0, 0, 0.5);
}

@media (min-width: 1000px) {
  .main-nav a {
    max-width: 500px;
    font-size: 2rem;
  }
}

SassMeister-rendered.html

<nav role='navigation' class="main-nav" id="main-nav">
  <ul id="main-nav-list">
    <li>
      <a href="#">
        <div>
          THE WORKSHOP
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          2013 SCHEDULE
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          ABOUT CSSWIZARDRY
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          CONTACT
        </div>
      </a>
    </li>
  </ul>
</nav>