Created
May 21, 2014 16:32
-
-
Save andrewdc/04b88e10358b539a3ff1 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.from-design-system-map { | |
font-family: "Josefin Sans", sans-serif; | |
} | |
.overridden-by-app-map { | |
font-family: "Your Mom Has Serifs", serif; | |
} | |
.nav { | |
background: white; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Wouldn't it just be simpler to:
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.