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

29 Jan, 2020
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"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;
"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-ouline-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/* 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;    }}
/* 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.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 */
.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<!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>
<!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@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);}
@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.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 */
.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<!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>
<!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
Bootstrap-Misc
Picked
SASS
Bootstrap
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.