Color Modifers

$color-modifiers: (
    primary: $primary,
    secondary: $secondary,
    danger: $danger,
    confirm: $confirm,

    success: $success,
    warning: $warning,
    error: $error,

    info: $info,
    disabled: $disabled,
) !default;

$color-modifiers is a map of BEM modifier names to colors for use with the color-modifiers() mixin. color-modifiers() is based on the modifiers() mixin for quickly created modifier classes. It will let you quickly create ABEM modifier classes:

.example {
    @include color-modifiers(primary, secondary);
}

is a shorthand for

.example {
    &.-primary {
        color: $primary;
    }
    &.-secondary {
        color: $secondary;
    }
}

More commonly you’ll not want to set color: but provide your own properties:

.example {
    @include color-modifiers(primary, secondary) using ($color) {
        background-color: $color;
        box-shadow: 0 0 25px $color;
    }
}

Specifing which modifiers to include is optional; if you don’t specify, it’ll generate modifiers for all of them:

.button {
    @include color-modifiers using ($color) {
        background-color: $color;
    }
}

is a shorthand for

.button {
    &.-primary {
        background-color: $primary;
    }
    &.-secondary {
        background-color: $secondary;
    }
    &.-danger {
        background-color: $danger;
    }
    &.-confirm {
        background-color: $confirm;
    }

    // ...
}

Note that you could generate a lot of CSS with this if you went wild with it. If you choose to do that, consider using purgecss or similar to remove modifiers that aren’t used.

Lastly, while the syntax changes slightly, you can also use color-modifiers() without $color-modifiers or as mix of custom modifers. Note the double parenthesis:

.button {
    @include color-modifiers((primary, secondary, confirm #88ff00, nuclear #f1c609));
}

is a shorthand for

.button {
    &.-primary {
        color: $primary;
    }
    &.-secondary {
        color: $secondary;
    }
    &.-confirm {
        color: #88ff00;
    }
    &.-nuclear {
        color: #f1c609;
    }
}