Sass

Title Code
Sass install setup
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 Vs Sass
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/
Sass edit
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;

        }
    }