Skip to content

Instantly share code, notes, and snippets.

@maxluster
Last active August 29, 2015 14:10
Show Gist options
  • Save maxluster/2fbfee664489ac713785 to your computer and use it in GitHub Desktop.
Save maxluster/2fbfee664489ac713785 to your computer and use it in GitHub Desktop.
Sass getColor
// Via https://bugsnag.com/blog/sass-color-palettes
// .el { color: getColor(red, 0) }
$colors: (
"red": (
0 : hsl(3, 72, 62),
1 : hsl(4, 85%, 66%),
2 : hsl(4, 84%, 78%),
pastel : hsl(0, 63, 94),
dark : hsl(2, 33, 32)
),
"purple": (
0 : hsl(239, 55, 66),
1 : hsl(239, 33%, 65%),
2 : hsl(243, 36%, 78%),
pastel : hsl(240, 54, 97),
dark : hsl(240, 25, 37),
highlight : hsl(240, 60, 99)
)
);
/**
* Returns individual color from $colors
*/
@function getColor($hueName, $id: 0) {
// Stringify $hueName if it is a color
@if type-of($hueName) == "color" {
$hueName: inspect($hueName);
}
// Error if data type is not string or color
@else if type-of($hueName) != "string" {
@error "Unexpected hue data type #{type-of($hueName)} (must be string or color)";
}
$hueName: unquote($hueName);
$color: map-get(map-get($colors, $hueName), $id);
// Error if there no color for $hueName, $id
@if type-of($color) != "color"{
@error "Color is not defined for (#{$hueName}, #{$id})";
}
@return $color;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment