Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav am-Nav='header'>
  <ul am-Nav-List>
    <li am-Nav-Item='active'><a href="#">Foo</a></li>
    <li am-Nav-Item><a href="#">Bar</a></li>
  </ul>
</nav>

SassMeister-input.sass

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

=reset-box
  border: 0
  margin: 0
  padding: 0

=reset-list
  +reset-box
  list-style: none

=reset-link
  +reset-box
  border: 0
  text-decoration: none

[am-Nav]
  font-size: 20px

[am-Nav-List]
  +reset-list

[am-Nav-Item]
  a
    +reset-link
    display: block
    padding: 20px 0
    text-align: center
    
[am-Nav-Item~='active']
  a
    font-weight: 700

[am-Nav~='header']
  display: table
  width: 100%

  [am-Nav-List]
    display: table-row

  [am-Nav-Item]
    display: table-cell
    a
      background-color: #FFF
      color: red
      &:hover
        background-color: red
        color: #FFF
        
  [am-Nav-Item~='active']
    a
      color: purple

SassMeister-output.css

[am-Nav] {
  font-size: 20px;
}

[am-Nav-List] {
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

[am-Nav-Item] a {
  border: 0;
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  display: block;
  padding: 20px 0;
  text-align: center;
}

[am-Nav-Item~='active'] a {
  font-weight: 700;
}

[am-Nav~='header'] {
  display: table;
  width: 100%;
}
[am-Nav~='header'] [am-Nav-List] {
  display: table-row;
}
[am-Nav~='header'] [am-Nav-Item] {
  display: table-cell;
}
[am-Nav~='header'] [am-Nav-Item] a {
  background-color: #FFF;
  color: red;
}
[am-Nav~='header'] [am-Nav-Item] a:hover {
  background-color: red;
  color: #FFF;
}
[am-Nav~='header'] [am-Nav-Item~='active'] a {
  color: purple;
}

SassMeister-rendered.html

<nav am-Nav='header'>
  <ul am-Nav-List>
    <li am-Nav-Item='active'><a href="#">Foo</a></li>
    <li am-Nav-Item><a href="#">Bar</a></li>
  </ul>
</nav>