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";
	}
}

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

    • Bill Erickson says

      Correct, SASS requires compiling, but all of our styles are so dependent upon SASS that this is not an issue.

      We use version control and deployment tools like DeployHQ or WPEngine’s git push for pushing code updates, so compiling is not an issue.

      There’s a lot of benefits to using SASS for your styles:

      • Organize your styles into smaller and logical partials (example)
      • Generate multiple stylesheets automatically from the partials. For instance, our editor-styles used by Gutenberg contain a small subset of the overall stylesheet (example)
      • Nesting makes CSS more readable
      • Create mixins for commonly used styles, like my font-sizes( $mobile, $tablet, $desktop ); or columns( $columns, $element, $gap ); for generating CSS grid styling with float-based fallback

      CSS variables are definitely interesting, but I haven’t had a need for the useful features they offer over SASS variables.

Leave A Reply