🎨 Background
The background foundation allows you to apply consistent background colors across components using a predefined map of color tokens.
It uses a loop to generate utility classes following the naming convention:
.f--background-{variation}📌 This loop will iterate over a map like this:
Section titled “📌 This loop will iterate over a map like this:”$colorbg-options: ( a: $color-a, b: $color-b, c: $color-c,);🔧 How to use it
Section titled “🔧 How to use it”In HTML
<div class="f--background-a">Background A</div><div class="f--background-b">Background B</div>In SCSS
- Extending the generated foundation class — preferred method:
.c--component-a { @extend .f--background-a;}- Using the map-get directly:
.c--component-a { background: map-get($colorbg-options, a);}