[SCSS] Access Theme Color Values With Sass

Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace.

 

$color-primary: indigo;
$color-secondary: blue;
$color-support: deeppink;

$theme-colors: (
  primary: $color-primary,
  secondary: $color-secondary,
  support: $color-support
);

@function theme-color($key) {
  @return map-get($theme-colors, $key);
}


h1 {
  color: theme-color(primary);
}

a {
  background-color: theme-color(support);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  padding: 0.25em 0.75em;

  &:hover {
    background-color: scale-color(theme-color(support), $lightness: -30%);
  }
}