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