Skip to content

Instantly share code, notes, and snippets.

@andrewdc
Created May 21, 2014 16:32
Show Gist options
  • Save andrewdc/04b88e10358b539a3ff1 to your computer and use it in GitHub Desktop.
Save andrewdc/04b88e10358b539a3ff1 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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);
}
.from-design-system-map {
font-family: "Josefin Sans", sans-serif;
}
.overridden-by-app-map {
font-family: "Your Mom Has Serifs", serif;
}
.nav {
background: white;
}
@swashcap
Copy link

Wouldn't it just be simpler to:

// _var.scss
$font-system: "Josefin Sans", sans-serif;
$font-app: "Your Mom Has Serifs", serif;
$nav-bg-color: #fff;
// _config.scss
.system {
  font-family: $font-system;
}
.app {
  font-family: $font-app;
}
.nav {
  background: $nav-bg-color;
}

I can see the application for reusability in a huge framework, but it seems like all the map back-and-forth would be a headache for new developers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment