Cacher is the code snippet organizer for pro developers

.from-design-system-map {
  font-family: "Josefin Sans", sans-serif;
}

.overridden-by-app-map {
  font-family: "Your Mom Has Serifs", serif;
}

.nav {
  background: white;
}

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// Here is our current variable system. 
// This is so we can incorporate a cross-app design system, 
// and also allow for heavy customization of chrome within apps,
// as many apps need to be themed for a client.
//==========================================================

// MAPS =============
// snippet from design system map, brought into apps via Bower
$nxsass-vars: (
  font: (
    header: ("Josefin Sans", sans-serif), 
    body:   ("Open Sans", sans-serif),
    code:   ("Source Code Pro", sans-serif)
  )
);
//every app must have an $app-vars map, though it can be empty, or only partial
$app-vars: (
  font: (
    body: ("Your Mom Has Serifs", serif)
  ) 
);
//app specific map
$app: (
  nav: (
    background: #fff
  )
);
// FUNCTIONS ==========
// This is the function from the design system
// Looks for an $app-vars map THEN fall-back to the design system map $nxsass-vars
@function nxsass($key, $value) {
  @if (map-has-key($app-vars, $key)) {
  @if (map-has-key( map-get($app-vars, $key), $value)) {
    @return map-get(map-get($app-vars, $key), $value);
  } @else {
    @return map-get(map-get($nxsass-vars, $key), $value);
  }
  } @else {
   @return map-get(map-get($nxsass-vars, $key), $value); 
  }
}

//point at an app specific map - e.g. vars not universal
@function app($property, $value) {
    @return map-get(map-get($app, $property), $value);
}

// USAGE ===============
.from-design-system-map {
  font-family:nxsass(font, header);
}
.overridden-by-app-map {
  font-family:nxsass(font, body);
}
//module only in this app
.nav {
  background:app(nav, background);
}