global.scss

/* ==========================================================================
   Color loop
   ========================================================================== */

$colors: ("black": $black, "dark": $dark, "dark2": $dark2, "gray": $gray, "orange": $orange, "red": $red, "light": $light, "lightred": $lightred, "white": $white);
$dark: ("black": $black, "dark": $dark, "dark2": $dark2, "gray": $gray, "orange": $orange, "red": $red);

@each $name,
$color in $colors {

    .has-#{$name}-color,
    .has-color-#{$name},
    .#{$name} {
        color: $color;
    }

    .has-#{$name}-background-color,
    .background-#{$name},
    .#{$name}-background {
        background-color: $color;
    }
}

@each $name,
$color in $dark {

    .has-#{$name}-background-color,
    .background-#{$name},
    .#{$name}-background {
        color: white;

        p,
        li,
        h1,
        h2,
        h3,
        h4 {
            color: white;
        }
    }
}