How to use SASS to create new set of color styles in Bootstrap 4 ?

By default, Bootstrap 4 provided all colors styles that are available as SASS variables and a SASS map in scss/_variables.scss file. In Further release, the ultra-new shade will be provided such as a grayscale palette. There are many color series defined in the SASS map which is looped to generates custom rulesets. Colors of Bootstrap 4 includes both theme colors and components colors for this SASS map plays a vital role. Initializing color variables using SASS:

• Example of SASS map: _colors.scss file

css

"white": $white,
$hotpink:hotpink;
$lightsalmon:#fa9872;
$lightgreen:#76FF03;
$palegreen:#00E676;
$gray-900:#212121;
$colors: (
"white": $white,
    "hotpink": $hotpink,
    "palegreen":$palegreen,
    "lightgreen":$lightgreen,
    "lightsalmon":$lightsalmon,
    "gray-dark": $gray-900) !default;

Approach 1: Here we handle button colors to create SASS $color map after creating SASS $color map, import it with @import and create @mixin in same file. In general, SASS class for button colors mainly based on “btn-variant” and btn-outline-variant. Here variant is the color utilities such as primary, secondary, etc. Generate @mixin for those btn-variant and btn-outline-variant. Then use @include to include above generated @mixin in respective class of SASS file as follows.

• SASS file: gfg.scss

css

/* Importing colors map */
@import'./colors';

/* Generating @mixin based on 'btn-variant' */
@mixin btn-variant ($color1, $color2,
            $color-hover: color-yiq($color1)) {
    background-color: $color1;
    border-color: $color1;
    color:$color2;
}

/* Generating @mixin based on 'btn-outline-variant' */
@mixin btn-outline-variant($color1, $color2) {
    background-color: $color2;
    border-color: $color1;
    color:$color1;
}

/* Including @mixin based on 'btn-variant' and
    hover properties within a custom class*/
.btn-hotpink {
    @include btn-variant($hotpink, white, $hotpink);
    &:hover {
        background-color: $hotpink !important;
        color: $white !important;
    }
}

.btn-lightgreen {
    @include btn-variant($lightgreen, white, $lightgreen);

    &:hover {
        background-color: $lightgreen !important;
        color: $white !important;
    }
}

.btn-lightsalmon {
    @include btn-variant($lightsalmon, white, $lightsalmon);

    &:hover {
        background-color: $lightsalmon !important;
        color: $white !important;
    }
}

/* Including @mixin based on 'btn-outline-variant'
  and hover properties within a custom class */
.btn-outline-hotpink {
    @include btn-outline-variant($hotpink, white);
    &:hover {
        background-color: $hotpink !important;
        color: $white !important;
    }
}

.btn-outline-lightgreen {
    @include btn-outline-variant($lightgreen, white);

    &:hover {
        background-color: $lightgreen !important;
        color: $white !important;
    }
}

.btn-outline-lightsalmon {
    @include btn-outline-variant($lightsalmon, white);

    &:hover {
        background-color: $lightsalmon !important;
        color: $white !important;
    }
}

• Compiled CSS file: gfg.css

css

.btn-hotpink {
    background-color: hotpink;
    border-color: hotpink;
    color: white;
}

.btn-hotpink:hover {
    background-color: hotpink !important;
    color: #FFFFFF !important;
}

.btn-outline-hotpink {
    background-color: white;
    border-color: hotpink;
    color: hotpink;
}

.btn-outline-hotpink:hover {
    background-color: hotpink !important;
    color: #FFFFFF !important;
}

.btn-lightgreen {
    background-color: #76FF03;
    border-color: #76FF03;
    color: white;
}

.btn-lightgreen:hover {
    background-color: #76FF03 !important;
    color: #FFFFFF !important;
}

.btn-outline-lightgreen {
    background-color: white;
    border-color: #76FF03;
    color: #76FF03;
}

.btn-outline-lightgreen:hover {
    background-color: #76FF03 !important;
    color: #FFFFFF !important;
}

.btn-lightsalmon {
    background-color: #fa9872;
    border-color: #fa9872;
    color: white;
}

.btn-lightsalmon:hover {
    background-color: #fa9872 !important;
    color: #FFFFFF !important;
}

.btn-outline-lightsalmon {
    background-color: white;
    border-color: #fa9872;
    color: #fa9872;
}

.btn-outline-lightsalmon:hover {
    background-color: #fa9872 !important;
    color: #FFFFFF !important;
}
/* sourceMappingURL=bs4buttonsex01.css.map */

• HTML file: index.html

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="./gfg.css">

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>

    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <center>
            <h1 style="color:green;padding:13px;">
                GeeksforGeeeks
            </h1>

            <br><br>

            <p>
                Bootstrap4 compiled CSS 'btn-lightgreen,
                btn-lightsalmon & btn-hotpink' and
                'btn-outline-lightgreen,
                btn-outline-lightsalmon &
                btn-outline-hotpink' using SASS
            </p>

            <div class="btn-group">
                <button type="button"
                        class="btn btn-lightgreen">
                    lightgreen
                </button>

                <button type="button"
                        class="btn btn-lightsalmon">
                    lightsalmon
                </button>

                <button type="button"
                        class="btn btn-hotpink">
                    purple
                </button>
            </div>

            <br><br>

            <div class="btn-group">
                <button type="button"
                        class="btn btn-outline-lightgreen">
                    lightgreen
                </button>

                <button type="button"
                        class="btn btn-outline-lightsalmon">
                    lightsalmon
                </button>

                <button type="button"
                        class="btn btn-outline-hotpink">
                    purple
                </button>
            </div>
        </center>
    </div>
</body>

</html>

• Output:

Approach 2: Handling background and text colors, after Creating SASS $color map, import it with @import and create @mixin in the same file. In general, SASS class for button colors mainly based on “bg-variant” and text-variant. Here variant is the color utilities such as primary, secondary, etc. Generate @mixin for those bg-variant and text-variant. Then use @include to include above-generated @mixin in respective class of SASS file as follows:

• SASS file: geeks.scss

css

@import'./colors';

@mixin bg-variant ($color1, $color2) {
    background-color: $color1;
    color: $color2;
}

@mixin text-variant($color1) {
    color: $color1;
}

.bg-palegreen {
    @include bg-variant($palegreen, white);
}

.text-palegreen {
    @include text-variant($palegreen);
}
.bg-gray900{
    @include bg-variant($gray-900, white);
}
.text-gray900 {
    @include text-variant($gray-900);
}

• Compiled CSS file:geeks.css

css

.bg-palegreen {
    background-color: #00E676;
    color: white;
}

.text-palegreen {
    color: #00E676;
}

.bg-gray900 {
    background-color: #212121;
    color: white;
}

.text-gray900 {
    color: #212121;
}
/*# sourceMappingURL=bs4buttonsex02.css.map */
/*# sourceMappingURL=bs4buttonsex02.css.map */

• HTML file: index2.html

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="./geeks.css">

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>

    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <center>
            <h1 style="color:green;padding:13px;">
                GeeksforGeeeks
            </h1>

            <br><br>

            <p>
                Bootstrap4 compiled CSS 'bg-palegreen &
                bg-gray900' and 'text-palegreen &
                text-gray900'using SASS
            </p>

            <div class="d-inline p-2 bg-palegreen text-white">
                d-inline
            </div>
            <div class="d-inline p-2 bg-gray900 text-white">
                d-inline
            </div>
            <div class="d-inline p-2 bg-palegreen text-white">
                d-inline
            </div>
            <div class="d-inline p-2 bg-light text-palegreen">
                d-inline
            </div>
            <div class="d-inline p-2 bg-palegreen text-white">
                d-inline
            </div>
            <div class="d-inline p-2 bg-white text-gray900">
                d-inline
            </div>
        </center>
    </div>
</body>

</html>

• Output:

Reference: https://getbootstrap.com/docs/4.4/getting-started/theming/#color