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:hover, &.has-#{$name}-color:focus { color: $color; } &.has-#{$name}-background-color:hover, &.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