Skip to content

Instantly share code, notes, and snippets.

@juliocesar
Last active August 3, 2016 05:45
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 juliocesar/29bcb2b92ba8c2a66f4feaa2b1c79efe to your computer and use it in GitHub Desktop.
Save juliocesar/29bcb2b92ba8c2a66f4feaa2b1c79efe to your computer and use it in GitHub Desktop.
Color palette implementation in Sass
// Color scale function
// ====================
//
// Similarly to dirg, this assists with creating rhythmic colour
// variations from a palette. The definition of the $color-palette var
// is made at build time.
// Granularity of variations.
$step-size: 7.5% !default;
// Alternatively, define this in a separate file.
$color-palette: (
'first': #000000,
'second': #FFFFFF,
'third': #D92C26
) !default;
// Example:
//
// .FooComponent {
// background: color('first');
// color: color('second', 2);
// }
@function color($name, $scale: 0) {
@if ($scale > 5 or $scale < (-5)) {
@error 'Scale argument cannot be #{$scale}. Passed with #{$name}';
}
$val: map-get($color-palette, $name);
@if $val {
@if $scale < 0 {
@return mix(white, $val, abs($scale) * $step-size);
} @else {
@return mix(black, $val, $scale * $step-size);
}
} @else {
@error 'Couldn\'t find color with name #{$name}';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment