Skip to content

Instantly share code, notes, and snippets.

@acdlite
Last active December 27, 2015 08:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save acdlite/7296120 to your computer and use it in GitHub Desktop.
Save acdlite/7296120 to your computer and use it in GitHub Desktop.
Experiment using Sass maps to handle project-level configuration.
$brand-color: (
red: #cf383a,
blue: #1f98d4,
yellow: #e4cb14,
white-eggshell: #f2efe2,
white: #000000,
black: #ffffff
);
// Returns brand color
@function brand-color($color) {
@return map-get($brand-color, $color);
}
$site-color: (
primary: brand-color(blue),
secondary: brand-color(red),
background: brand-color(white-eggshell),
text: brand-color(black),
heading: brand-color(black),
text-link: brand-color(blue),
text-link-hover: brand-color(blue)
);
// Returns site color
@function site-color($color) {
@return map-get($site-color, $color);
}
// Returns either brand or site color, if it exists
// Brand color gets precedence
@function color($color) {
@return brand-color($color) or site-color($color);
}
a {
color: color(text-link);
text-decoration: underline;
cursor: pointer;
&:hover {
color: color(text-link-hover);
text-decoration: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment