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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    "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;

    chevron_right

    
    

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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    /* 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;
        }
    }

    chevron_right

    
    

  • Compiled CSS file: gfg.css
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .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 */

    chevron_right

    
    

  • HTML file: index.html
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
       
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
          
        <link rel="stylesheet" href=
          
        <link rel="stylesheet" href="./gfg.css">
          
        <script src=
        </script>
          
        <script src=
        </script>
          
        <script src=
        </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>

    chevron_right

    
    

  • 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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @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);
    }

    chevron_right

    
    

  • Compiled CSS file:geeks.css
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .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 */

    chevron_right

    
    

  • HTML file: index2.html
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
       
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
          
        <link rel="stylesheet" href=
          
        <link rel="stylesheet" href="./geeks.css">
          
        <script src=
        </script>
          
        <script src=
        </script>
          
        <script src=
        </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>

    chevron_right

    
    

  • Output:

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




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.