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 the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

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

Let's Talk