SASS Color Function

The custom WordPress themes we build use brand colors for certain design elements and the Gutenberg color palette.

We usually have three versions of each color: the main color, and lighter/darker versions for hover effects. We’ll often auto-generate the lighter/darker versions, but sometimes we need to specify a custom color.

In the past I’ve added all of the colors as their own independent variables:

// Brand Colors
// -- normal / darker / lighter
$blue_1: #59BACC;
$blue_2: darken( $blue_1, 10% );
$blue_3: lighten( $blue_1, 10% );
$green_1: #58AD69;
$green_2: #458D53;
$green_3: #7ABE88;

I’ve recently shifted to using a custom SASS function, brand-color(), that makes it easier to select the color.

a {
	color: brand-color( 'blue' );

	&:hover {
		color: brand-color( 'blue', 'darken' );
}

Inside my theme I define a map of $brand_colors. If you only specify the main color, it will auto-generate the lighten and darken variants. But you can also manually specify your own colors for those.

The list of 6 variables above has been reduce to:

$brand_colors: (
	'blue'		: #59BACC,
	'green'		: #58AD69,
	'green_darken'	: #458D53,
	'green_lighten'	: #7ABE88,
);

And here’s my custom brand-color() function. Take a look at my base theme to see how it’s included.

If you’d like to build your own SASS functions, take a look at the @function documentation.

/**
 * Brand Color
 *
 */
@function brand-color( $key, $variant: null ) {
	@if map-has-key( $brand_colors, $key ) {
		$color: map-get( $brand_colors, $key );
		@if ( 'lighten' == $variant ) {
			$lighten_key: $key + '_lighten';
			@if map-has-key( $brand_colors, $lighten_key ) {
				$color: #{map-get( $brand_colors, $lighten_key )};
			} @else {
				$color: lighten( $color, 10% );
			}
		}
		@else if( 'darken' == $variant ) {
			$darken_key: $key + '_darken';
			@if map-has-key( $brand_colors, $darken_key ) {
				$color: #{map-get( $brand_colors, $darken_key )};
			} @else {
				$color: darken( $color, 10% );
			}
		}
		@return $color;
	} @else {
		@error "The #{$key} color could not be found in $brand_colors";
	}
}