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 ($color 1 , $color 2 , $color-hover: color-yiq($color 1 )) { background-color : $color 1 ; border-color : $color 1 ; color :$color 2 ; } /* Generating @mixin based on 'btn-outline-variant' */ @mixin btn-outline-variant($color 1 , $color 2 ) { background-color : $color 2 ; border-color : $color 1 ; color :$color 1 ; } /* 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;"> BeginnerforGeeeks </ 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: Beginner.scss
css
@import './colors' ; @mixin bg-variant ($color 1 , $color 2 ) { background-color : $color 1 ; color : $color 2 ; } @mixin text-variant($color 1 ) { color : $color 1 ; } .bg-palegreen { @include bg-variant($palegreen, white ); } .text-palegreen { @include text-variant($palegreen); } .bg-gray 900 { @include bg-variant($gray -900 , white ); } .text-gray 900 { @include text-variant($gray -900 ); } |
- Compiled CSS file:Beginner.css
css
.bg-palegreen { background-color : #00E676 ; color : white ; } .text-palegreen { color : #00E676 ; } .bg-gray 900 { background-color : #212121 ; color : white ; } .text-gray 900 { 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="./Beginner.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;"> BeginnerforGeeeks </ 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
Contact Us