# Sass color function demo

## Create a function to allow a variable declared in a Sass Map to be easily used throughout a project without having to repeat:

    background: map-get(map-name, color-name);

## Instead, let's use something shorter:

    background: color(color-name);

## Below is the code for this function. Detailed comments are included in the CSS (SCSS) panel.

    @function color($color) {
        @if map-has-key($theme-colors, $color) {
            @return map-get($theme-colors, $color);
        }

        @warn "Unknown `#{$color}` in $theme-colors.";
        @return null;
    }

## By using our sass map and color function in an each loop, you can create our background and foreground color classes dynamically:

    @each $color, $color-value in $theme-colors {
        .bg-#{$color} {
            background: color($color);
        }

        .#{$color} {
            color: color($color);
        }
    }

## Display background colors

## Display foreground colors

`color: color(coral);` `color: color(orange);` `color: color(yellow);` `color: color(green);` `color: color(teal);` `color: color(blue);` `color: color(purple);` `color: color(gray);` `color: color(black);`