Color maps in SASS

Here's a nice way to create color maps for your theme in SASS.
// _variables.scss
$colors: (
  "superorange": #ff5400,
  "almostblack": #111
);
 
// _mixins.scss
@function color($key) {
  @if not map-has-key($colors, $key) {
    @warn "Key `#{$key}` not found in $colors map.";
  }
  @return map-get($colors, $key);
}
 
// _example-component.scss
.example-component {
  background-color: color(almostblack);
  color: color(superorange);
}

Tags

Internal References

External References

Article Type

General