SASS loops

For more information, see Gutenberg Color Palette and Button Styling

// Brand Colors
$blue: #93DDDC;
$blue_dark: #1873C2;
$pink: #F079A1;
$green: #A0CA00;
$yellow: #FFD12A;
$teal: #45C9B5;
$teal_dark: #269B89;
$pinterest: #CD1A19;

$colors: (
	'teal' : $teal,
	'blue' : $blue,
	'dark-blue' : $blue_dark,
	'pink' : $pink,
	'green' : $green,
	'yellow' : $yellow,

.wp-block-button__link {

	@each $name, $color in $colors {

		&.has-#{$name}-color:focus {
			color: $color;

		&.has-#{$name}-background-color:focus {
			background-color: darken( $color, 20% );

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