Generated by SassMeister.com.

SassMeister-input.scss

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

@import "sass-maps-plus";

// nav component configs (How to distinguish between component structure and style schema?)
$nav: (
  item: (
    color: (
      text: blue,
      background: white
    ),
    hover: (
      color: (
        text: purple
      )
    )
  ),
  link: (
    color: (
      text: red
    )
  )
);

// Mixin to allow customizing
@mixin customize($component, 
$subcomponent:null, 
$component-variation:null, 
$subcomponent-variation:null) {
  $name: $component;
  
  @if $component-variation != null {
    $name: $name + '--' + $component-variation;
  }
  
  @if $subcomponent != null {
    $name: $name + '__' + $subcomponent;
  
    @if $subcomponent-variation != null {
      $name: $name + '--' + $subcomponent-variation;
    }
  }
  
  .#{$name} {
    @content;
  }
}

// Framework styles
.nav {
}

.nav__item {
  color: map-get-z($nav, item, color, text);
  background-color: map-get-z($nav, item, color, background);
  
  &:hover {
    color: map-get-z($nav, item, hover, color, text);;
  }
}

.nav__link {
  color: map-get-z($nav, link, color, text);
}

// Customized styles. Dev doesn't need to know how framework implements selectors (almost)!
@include customize(nav, item) {
  color: black;
  
  // Eh, still need straight up CSS
  &:hover {
    color: green;
  }
}

@include customize(nav) {
  line-height: 1em;
};

SassMeister-output.css

.nav__item {
  color: blue;
  background-color: white;
}

.nav__item:hover {
  color: purple;
}

.nav__link {
  color: red;
}

.nav__item {
  color: black;
}

.nav__item:hover {
  color: green;
}

.nav {
  line-height: 1em;
}