Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-state="active">Item 4</li>
  </ul>
</nav>

<nav class="inverted">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-state="active">Item 4</li>
  </ul>
</nav>

<nav class="accent">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-state="active">Item 4</li>
  </ul>
</nav>

<nav class="accent-inverted">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-state="active">Item 4</li>
  </ul>
</nav>

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

$colors: (
  'background': #fff,
  'foreground': #000,
  'accent':     #ff0000,
);

@function switch-color($color) {
  @if $color == 'foreground' {
    @return 'background'
  } @else if $color == 'background' {
    @return 'foreground'
  }
  @return null;
}

@function set-color($type, $rule: 'default') {
  @if ($rule == 'inverted') {
    @return map-get($colors, switch-color($type));
  } @else if ($rule == 'accent') {
    @if $type == 'background' {
      @return map-get($colors, 'accent')  ;
    } @else if $type == 'foreground' {
      @return map-get($colors, 'foreground')  ;
    }
    
  } @else {
    @return map-get($colors, $type);
  }
}

nav {
  background-color: set-color(background);
  
  &.inverted {
    background-color: set-color(background, 'inverted');  
  }

  &.accent,
  &.accent-inverted {
    background-color: set-color(background, 'accent');  ;  
  }

}

li {
  color: set-color('foreground');

  .inverted & {
    color: set-color('foreground', 'inverted');
  }

  .accent & {
    color: set-color('foreground', 'inverted');
  }
  
  .accent-inverted & {
    color: map-get($colors, 'background');
  }
  
  &[data-state="active"] {
    color: map-get($colors, 'accent');
    border-bottom: solid 4px map-get($colors, 'accent');
      .accent & {
        color: map-get($colors, 'background');
        border-bottom: solid 4px map-get($colors, 'background');
      }
      .accent-inverted & {
        color: map-get($colors, 'foreground');
        border-bottom: solid 4px map-get($colors, 'foreground');
      }
  }
}






















body {
  padding: 0;
  margin: 0;
  background: #ccc;
  font-family: 'Helvetica Neue';
}























nav {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  ul {
    list-style: none;
    display: flex;
    
    li {
      padding: 20px;
      flex: 1 100%;
    }
  }
  
 
}

SassMeister-output.css

nav {
  background-color: #fff;
}
nav.inverted {
  background-color: #000;
}
nav.accent, nav.accent-inverted {
  background-color: #ff0000;
}

li {
  color: #000;
}
.inverted li {
  color: #fff;
}
.accent li {
  color: #fff;
}
.accent-inverted li {
  color: #fff;
}
li[data-state="active"] {
  color: #ff0000;
  border-bottom: solid 4px #ff0000;
}
.accent li[data-state="active"] {
  color: #fff;
  border-bottom: solid 4px #fff;
}
.accent-inverted li[data-state="active"] {
  color: #000;
  border-bottom: solid 4px #000;
}

body {
  padding: 0;
  margin: 0;
  background: #ccc;
  font-family: 'Helvetica Neue';
}

nav {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}
nav ul {
  list-style: none;
  display: flex;
}
nav ul li {
  padding: 20px;
  flex: 1 100%;
}

SassMeister-rendered.html

<nav>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-state="active">Item 4</li>
  </ul>
</nav>

<nav class="inverted">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-state="active">Item 4</li>
  </ul>
</nav>

<nav class="accent">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-state="active">Item 4</li>
  </ul>
</nav>

<nav class="accent-inverted">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li data-state="active">Item 4</li>
  </ul>
</nav>