Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="primary-nav">
            <li class="primary-nav__item">
        <a href="/" class="primary-nav__link is-active">Menu Item 1</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/2" class="primary-nav__link">Menu Item 2</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/3" class="primary-nav__link">Menu Item 3</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/4" class="primary-nav__link">Menu Item 4</a>
              </li>
          <li class="menu-item primary-nav__item">
        <a href="/node/5" class="primary-nav__link">Menu Item 5</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/6" class="primary-nav__link">Menu Item 6</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/7" class="primary-nav__link">Menu Item 7</a>
              </li>
      </ul>

SassMeister-input.scss

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

@import "breakpoint";
@import "singularitygs";

$three-column: 861px;

// Padding.
// Example: @include paddingSize(0.7em, 1.2em, 0.9em, 1.2em);
@mixin paddingSize($paddingTop, $paddingRight, $paddingBottom, $paddingLeft) {
  padding-top: $paddingTop;
  padding-right: $paddingRight;
  padding-bottom: $paddingBottom;
  padding-left: $paddingLeft;
}

// Margin.
// Example: @include marginSize(0.7em, 1.2em, 0.9em, 1.2em);
@mixin marginSize($marginTop, $marginRight, $marginBottom, $marginLeft) {
  margin-top: $marginTop;
  margin-right: $marginRight;
  margin-bottom: $marginBottom;
  margin-left: $marginLeft;
}

$menu-width: percentage(1/7);

.primary-nav {
  display: none; // TODO: add mobile version.
  @include breakpoint($three-column) {
    display: flex;
    height: 80px;
    @include marginSize(0, 0, 0, 0);
    @include paddingSize(0, 0, 0, 0);
    @include grid-span(9, 3);
  }
}

.primary-nav__item {
  display: inline-block;
  align-self: flex-end;
  width: $menu-width;
  list-style: none;
  @include marginSize(0, 2px, 0, 0);
  @include paddingSize(0, 0, 0, 0);
}

.primary-nav__link {
  display: block;
  height: 70px;
  align-self: flex-start;
  text-transform: uppercase;
  text-align: center;
  @include paddingSize(1em, 0, 0, 0);
  &:hover {
    height: 80px;
    width: 100%;
    color: red;
    background-image: none;
    text-decoration: none;
    @include paddingSize(1.6em, 0, 0, 0);
  }
}

.primary-nav__item .is-active {
  height: 80px;
  width: 100%;
  color: green;
  @include paddingSize(1.6em, 0, 0, 0);
}

SassMeister-output.css

.primary-nav {
  display: none;
}

@media (min-width: 861px) {
  .primary-nav {
    display: flex;
    height: 80px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    width: 74.57627%;
    float: left;
    margin-right: -100%;
    margin-left: 16.94915%;
    clear: none;
  }
}

.primary-nav__item {
  display: inline-block;
  align-self: flex-end;
  width: 14.28571%;
  list-style: none;
  margin-top: 0;
  margin-right: 2px;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.primary-nav__link {
  display: block;
  height: 70px;
  align-self: flex-start;
  text-transform: uppercase;
  text-align: center;
  padding-top: 1em;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.primary-nav__link:hover {
  height: 80px;
  width: 100%;
  color: red;
  background-image: none;
  text-decoration: none;
  padding-top: 1.6em;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.primary-nav__item .is-active {
  height: 80px;
  width: 100%;
  color: green;
  padding-top: 1.6em;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

SassMeister-rendered.html

<ul class="primary-nav">
            <li class="primary-nav__item">
        <a href="/" class="primary-nav__link is-active">Menu Item 1</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/2" class="primary-nav__link">Menu Item 2</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/3" class="primary-nav__link">Menu Item 3</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/4" class="primary-nav__link">Menu Item 4</a>
              </li>
          <li class="menu-item primary-nav__item">
        <a href="/node/5" class="primary-nav__link">Menu Item 5</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/6" class="primary-nav__link">Menu Item 6</a>
              </li>
          <li class="primary-nav__item">
        <a href="/node/7" class="primary-nav__link">Menu Item 7</a>
              </li>
      </ul>