Skip to content

Instantly share code, notes, and snippets.

@alexgetty

alexgetty/sass-color-maps.scss

Last active June 9, 2017 16:33
Show Gist options
  • Save alexgetty/c739b8a982b7e6517ccc63f114f72c3f to your computer and use it in GitHub Desktop.
Save alexgetty/c739b8a982b7e6517ccc63f114f72c3f to your computer and use it in GitHub Desktop.
Download ZIP
A technique for organizing colors using Sass maps and a getter function
Raw
sass-color-maps.scss
// Color Definition
$colors: (
primary: (
light: #67A1E9,
base: #428CE8,
dark: #3478CD
),
status: (
success: #50E39A,
inactive: #B7BCC5,
warning: #F8C71C,
error: #FF388E,
disabled: #B7BCC5
),
neutral: (
lightest: #FFFFFF,
lighter: #F8FAFE,
light: #E7EAF1,
base: #B7BCC5,
dark: #494C50,
darker: #1E2124,
darkest: #000000
)
);
// Getter Functions
@function color($palette: primary, $shade: base) {
@return map-get(map-get($colors, $palette), $shade);
}
@function color-rgba($alpha, $palette: primary, $shade: base) {
@return rgba(map-get(map-get($colors, $palette), $shade), $alpha);
}
// Usage Examples
h1 {
color: color(neutral, darker);
}
button {
background-color: getColor(primary);
}
.card {
border: 1px solid getColor(neutral);
}
.error {
color: color(status, error);
}
@01taylop
Copy link

01taylop commented Jun 9, 2017 •
edited
Loading

Thanks for this, I am now using a very similar implementation.
You could use a function here so avoid the double map get:

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}

and you would call it like this:

@return map-deep-get($colors, $palette, $shade);
@return rgba(map-deep-get($colors, $palette, $shade), $alpha);

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