Sass
Title | Code |
---|---|
|
Initialize your project npm init -y` Install bootstrap npm i bootstrap@next If it no working you should install any [particular version](https://getbootstrap.com/) npm install bootstrap@5.3.0-alpha1 [install bootstrap icons](https://www.npmjs.com/package/bootstrap-icons) npm i bootstrap-icons Create *index* page touch index.html Create a scss folder and include main.scss file mkdir scss cd scss touch main.css Include all of Bootstrap’s sass import this line @import "../node_modules/bootstrap/scss/bootstrap"; File path: scss/main.scss Source: https://www.youtube.com/watch?v=rGUvzhVTqhw&t=603s Run sass command sass --watch . Stop Press Ctrl-C |
|
Scss input ----------- $color: blue; body { background-color: $color; } Scss output ----------- body { background-color: blue; } ================ Sass input ----------- $color: blue; body background-color: $color; } Sass output ----------- body { background-color: blue; } https://www.geeksforgeeks.org/what-is-the-difference-between-scss-and-sass/ |
|
Suppose i want to change card background color _card.scss .card{ --#{$prefix}card-bg: #{$card-bg}; } _variable.scss $card-bg: var(--#{$prefix}body-bg) !default; _root.scss :root, [data-bs-theme="light"] { --#{$prefix}body-bg: #{$body-bg}; N:B: Go to _variable.scss $body-bg: $white !default; $white: #fff !default; } @if $enable-dark-mode { @include color-mode(dark, true) { --#{$prefix}body-bg: #{$body-bg-dark}; N:B: Go to _variable-dark.scss $body-bg-dark: $gray-900 !default; _variable.scss $gray-900: #212529 !default; $dark: $gray-900 !default; $body-color: $gray-900 !default; } } |