Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="top-nav">
  <li>
    <a href="#a">Solutions</a>
  </li>
  <li>
    <a href="#b">Catalog</a>
  </li>
  <li>
    <a href="#c">Pricing</a>
  </li>
  <li>
    <a href="#d">Docs</a>
  </li>
  <li>
    <a href="#e">Community</a>
  </li>
</ul>

SassMeister-input.scss

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

/* Variables */
$bgColor: #444444;
$textColor: #E0E0E0;
$hoverColor: #FFCC00;
$fontStack: 'HelveticaNeue', Helvetica, Arial, sans-serif;

/* Styles */
body {
  background: $bgColor;
  color: $textColor;
  font-family: $fontStack;
  text-transform: uppercase;
}

.top-nav {
  padding: 0;
  margin: 0;
  li {
    display: block;
    float: left;
    list-style: none;
    border-left: 1px solid $textColor;
    &:first-child {
      border-left: none;
    }
    a {
      display: block;
      padding: 20px;
      color: $textColor;
      text-decoration: none;
      transition: all 200ms;
      &:hover {
        color: $hoverColor;
        background: rgba($textColor, 0.4);
      }
    }
  }
}

SassMeister-output.css

/* Variables */
/* Styles */
body {
  background: #444444;
  color: #e0e0e0;
  font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
}

.top-nav {
  padding: 0;
  margin: 0;
}
.top-nav li {
  display: block;
  float: left;
  list-style: none;
  border-left: 1px solid #e0e0e0;
}
.top-nav li:first-child {
  border-left: none;
}
.top-nav li a {
  display: block;
  padding: 20px;
  color: #e0e0e0;
  text-decoration: none;
  transition: all 200ms;
}
.top-nav li a:hover {
  color: #ffcc00;
  background: rgba(224, 224, 224, 0.4);
}

SassMeister-rendered.html

<ul class="top-nav">
  <li>
    <a href="#a">Solutions</a>
  </li>
  <li>
    <a href="#b">Catalog</a>
  </li>
  <li>
    <a href="#c">Pricing</a>
  </li>
  <li>
    <a href="#d">Docs</a>
  </li>
  <li>
    <a href="#e">Community</a>
  </li>
</ul>