Skip to Content


Add more Bootstrap-style button and background color class names.

Sass August 7, 2020


@include add-color-class($name, $bg, $text, $active_bg, $active_text)


(Required) (String) The name that appears on the class
Default: None

(Required) (Color) The background color of the element
Default: None

(Optional) (Color) The color of the foreground (usually text)
Default: Readable color based on the background

(Optional) (Color) The background color of the element when active
Default: $bg

(Optional) (Color) The color of the foreground when active (usually text)
Default: Readable color based on the active background

Request or provide clarification »


@include add-color-class("accent", cyan);
@include add-color-class("accent", purple, white);

Override a pre-defined Nebula class name (for example: to force a text color) by making the selector more specific.

html {
  @include add-color-class("brand", $primary_color, #fff); //Force white text on brand color

This can also be used to override Bootstrap color classes.

@include add-color-class('primary', 'green');

Additional Notes

This mixin creates 4 classes to use with or without Bootstrap elements (where “name” below is replaced with the first parameter):

  • Bootstrap elements:
    • .btn-name
    • .btn-outline-name
    • .bg-name
  • Additional helper classes:
    • .border-name
    • .name-color
Was this page helpful? Yes No

    A feedback message is required to submit this form.

    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /assets/scss/partials/_mixins.scss on line 45.

    @mixin add-color-class($name, $bg, $fg: null, $active_bg: null, $active_fg: null){
        @if ( $fg == null ){
            $fg: readable-color($bg);
        @if ( $active_bg == null ){
            $active_bg: $bg;
        @if ( $active_fg == null ){
            $active_fg: readable-color($active_bg);
        .btn.btn-#{$name}:visited {background-color: $bg; border-color: $bg; color: $fg;
            &:hover, &:focus {background: darken($bg, 10%); border-color: darken($bg, 10%); color: $fg;}
            &:focus {box-shadow: 0 0 0 0.2rem rgb($bg, 25%);}
            &.active {background: $active_bg; border-color: $active_bg; color: $active_fg;}
        .btn.btn-outline-#{$name}:visited {color: $bg; background-color: transparent; background-image: none; border-color: $bg;
            &:hover, &:focus {color: #fff; background-color: $bg; border-color: $bg;}
            &.active {background-color: $active_bg; border-color: $active_bg;}
        .bg-#{$name} {background-color: $bg !important;}
        .border-#{$name} {border-color: $bg !important;}
        .#{$name}-color {color: $bg !important;}


    To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

    @mixin add-color-class($name, $bg, $fg, $active_bg, $active_fg){
        //Write your own code here, leave it blank, or return false.