ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯑꯗꯣꯃꯒꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ ꯁꯦꯃꯒꯠꯄꯗꯥ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯍꯅꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ, ꯃꯦꯄꯁꯤꯡ, ꯃꯤꯛꯁꯤꯅꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯒꯤ ꯀꯥꯟꯅꯕꯥ ꯂꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ, ꯃꯦꯄꯁꯤꯡ, ꯃꯤꯛꯁꯤꯅꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥꯒꯤ ꯀꯥꯟꯅꯕꯥ ꯂꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯐꯥꯏꯂꯒꯤ ꯁ꯭ꯠꯔꯀꯆꯔ꯫

ꯌꯥꯔꯤꯕꯃꯈꯩ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯣꯔ ꯐꯥꯏꯂꯁꯤꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯔꯣꯏꯗꯕꯅꯤ꯫ ꯁꯥꯁꯀꯤ ꯑꯣꯏꯅꯗꯤ, ꯃꯗꯨꯒꯤ ꯑꯔꯊꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯇꯦꯟꯗ ꯇꯧꯕꯥ ꯌꯥꯅꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯁꯦꯝꯕꯥ ꯍꯥꯌꯕꯅꯤ꯫ ꯅꯍꯥꯛꯅꯥ npmꯒꯨꯝꯕꯥ ꯄꯦꯀꯦꯖ ꯃꯦꯅꯦꯖꯔ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯔꯤ ꯍꯥꯌꯅꯥ ꯂꯧꯔꯒꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯐꯥꯏꯜ ꯁ꯭ꯠꯔꯀꯆꯔ ꯑꯃꯥ ꯂꯩꯒꯅꯤ:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯣꯔꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯗꯥꯎꯅꯂꯣꯗ ꯇꯧꯈ꯭ꯔꯕꯗꯤ ꯑꯃꯁꯨꯡ ꯄꯦꯀꯦꯖ ꯃꯦꯅꯦꯖꯔ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯣꯔꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯁꯣꯔꯁꯇꯒꯤ ꯇꯣꯉꯥꯟꯅꯥ ꯊꯃꯗꯨꯅꯥ, ꯁ꯭ꯠꯔꯀꯆꯔ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯄꯣꯠꯁꯛ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯝꯕꯥ ꯄꯥꯝꯂꯒꯅꯤ꯫

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯀꯤ custom.scss, ꯅꯍꯥꯛꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯒꯅꯤ꯫ ꯅꯍꯥꯛꯀꯤ ꯑꯣꯄꯁꯟ ꯑꯅꯤ ꯂꯩ: ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯄꯨꯝꯅꯃꯛ ꯌꯥꯎꯍꯅꯕꯥ, ꯅꯠꯠꯔꯒꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯔꯤꯕꯥ ꯁꯔꯨꯀꯁꯤꯡ ꯑꯗꯨ ꯈꯜꯂꯨ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯃꯁꯨꯡ ꯗꯤꯄꯦꯟꯗꯦꯟꯁ ꯈꯔꯥ ꯂꯩ ꯍꯥꯌꯕꯥ ꯈꯉꯂꯕꯁꯨ ꯑꯩꯈꯣꯌꯅꯥ ꯇꯨꯡꯗꯥ ꯂꯥꯛꯀꯗꯕꯥ ꯑꯁꯤꯕꯨ ꯄꯨꯛꯅꯤꯡ ꯊꯧꯒꯠꯂꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯗꯣꯝꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯈꯔꯁꯨ ꯌꯥꯑꯣꯍꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

ꯁꯦꯇꯑꯞ ꯑꯗꯨ ꯃꯐꯝ ꯆꯥꯅꯥ ꯂꯩꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ custom.scss. // Optionalꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯁꯦꯛꯁꯟ ꯑꯁꯤꯒꯤ ꯃꯈꯥꯗꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯔꯨꯀꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯁꯨ ꯍꯧꯕꯥ ꯌꯥꯏ꯫ ꯑꯩꯈꯣꯌꯒꯤ bootstrap.scssꯐꯥꯏꯂꯗꯒꯤ ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯏꯝꯄꯣꯔꯠ ꯁ꯭ꯇꯦꯛ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯍꯧꯔꯀꯐꯝ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯄꯥꯎꯇꯥꯛ ꯄꯤꯔꯤ꯫

ꯚꯦꯔꯤꯑꯦꯕꯜ ꯗꯤꯐꯣꯜꯇꯁꯤꯡ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯂꯩꯕꯥ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ !defaultꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯣꯔꯁ ꯀꯣꯗ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯗꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯁꯥꯁꯇꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯗꯨꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯌꯥꯍꯅꯒꯗꯕꯥ ꯐ꯭ꯂꯦꯒ ꯑꯗꯨ ꯌꯥꯎꯏ꯫ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯀꯣꯄꯤ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯄꯦꯁ꯭ꯠ ꯇꯧꯕꯥ, ꯃꯈꯣꯌꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ, ꯑꯃꯁꯨꯡ !defaultꯐ꯭ꯂꯦꯒ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯄꯥ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯥ ꯍꯥꯟꯅꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯈ꯭ꯔꯕꯗꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯃꯁꯤ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯂꯩꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨꯁꯤꯡꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯔꯣꯏ.

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯗꯨ ꯅꯍꯥꯛꯅꯥ scss/_variables.scss. ꯚꯦꯔꯤꯑꯦꯕꯜ ꯈꯔꯗꯤ null, ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯅꯐꯤꯒꯔꯦꯁꯟꯗꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯗ꯭ꯔꯕꯗꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯗꯨ ꯑꯥꯎꯇꯄꯨꯠ ꯇꯧꯗꯦ.

ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯚꯔꯔꯥꯏꯗꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯂꯥꯛꯀꯗꯕꯅꯤ, ꯑꯗꯨꯕꯨ ꯑꯇꯣꯞꯄꯥ ꯏꯝꯄꯣꯔꯇꯁꯤꯡꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯂꯥꯛꯀꯗꯕꯅꯤ꯫

npmꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ Bootstrap ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯃꯁꯨꯡ background-colorꯑꯗꯨ colorꯍꯣꯡꯗꯣꯛꯂꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯃꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ :<body>

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯎꯅꯥ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯂꯩꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯍꯟꯖꯤꯟ ꯍꯟꯖꯤꯟ ꯇꯧꯕꯤꯌꯨ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯁ꯭ꯇꯥꯔꯇꯔ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ npmꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ Bootstrap ꯒꯤ ꯃꯇꯦꯡꯅꯥ ꯍꯧꯗꯣꯀꯎ! ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ npm ꯄ꯭ꯔꯣꯖꯦꯛꯇꯇꯥ Bootstrap ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯁꯦꯃꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯅꯕꯒꯤꯗꯃꯛ twbs/bootstrap-npm-starter ꯇꯦꯃꯞꯂꯦꯠ ꯔꯤꯄꯣꯖꯤꯇꯔꯤꯗꯥ ꯆꯠꯂꯨ . ꯁꯥꯁ ꯀꯝꯄꯥꯏꯂꯔ, ꯑꯣꯇꯣꯞꯔꯤꯐꯤꯛꯁꯔ, ꯁ꯭ꯇꯥꯏꯂꯤꯟꯇ, ꯄꯔꯖꯁꯤꯑꯦꯁꯑꯦꯁ, ꯑꯃꯁꯨꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯥꯏꯀꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯃꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯂꯨꯄꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯁꯥꯁ ꯃꯦꯞ ꯃꯁꯤꯡ ꯈꯔꯥ ꯌꯥꯑꯣꯔꯤ, ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯏꯃꯨꯡꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯗꯥ ꯂꯥꯏꯊꯣꯀꯍꯜꯂꯤꯕꯥ ꯃꯔꯨ ꯑꯣꯏꯕꯥ ꯚꯦꯜꯌꯨ ꯄꯦꯌꯥꯔꯁꯤꯡ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯆꯨꯁꯤꯡ, ꯒ꯭ꯔꯤꯗ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥꯒꯤꯗꯃꯛ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯨꯝꯅꯥ, ꯁꯥꯁ ꯃꯦꯞ ꯄꯨꯝꯅꯃꯛꯇꯥ !defaultꯐ꯭ꯂꯦꯒ ꯌꯥꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯇꯦꯟꯗ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯃꯦꯞ ꯈꯔꯗꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯔꯕꯥ ꯃꯦꯞꯁꯤꯡꯗꯥ ꯃꯔꯖ ꯇꯧꯏ꯫ ꯃꯁꯤ ꯑꯄꯤꯕꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯥ ꯐꯖꯅꯥ ꯄꯥꯀꯊꯣꯛ ꯆꯥꯎꯊꯣꯀꯍꯅꯕꯥ ꯌꯥꯅꯕꯥ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯃꯁꯤ ꯃꯦꯞ ꯑꯃꯗꯒꯤ ꯄꯣꯠꯁꯤꯡ ꯂꯧꯊꯣꯀꯄꯥ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯑꯋꯥꯕꯥ ꯑꯣꯏꯍꯅꯕꯒꯤ ꯃꯃꯂꯗꯥ ꯂꯥꯀꯏ꯫

ꯃꯦꯞ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫

ꯃꯦꯞ ꯑꯁꯤꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯄꯨꯝꯅꯃꯛ $theme-colorsꯑꯁꯤ ꯁ꯭ꯇꯦꯟꯗꯂꯣꯟ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯅꯥ ꯂꯦꯄꯊꯣꯛꯂꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯦꯄꯇꯥ ꯂꯩꯔꯤꯕꯥ ꯃꯆꯨ ꯑꯃꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ $theme-colors, ꯅꯍꯥꯛꯀꯤ ꯀꯁ꯭ꯇꯝ ꯁꯥꯁ ꯐꯥꯏꯂꯗꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯍꯥꯄꯆꯤꯜꯂꯨ:

$primary: #0074d9;
$danger: #ff4136;

ꯃꯇꯨꯡꯗꯥ, ꯍꯥꯌꯔꯤꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ $theme-colorsꯃꯦꯄꯇꯥ ꯁꯦꯠ ꯇꯧꯏ:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

ꯃꯦꯄꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

$theme-colorsꯅꯍꯥꯛꯀꯤ ꯀꯁ꯭ꯇꯝ ꯚꯦꯜꯌꯨꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯅꯧꯕꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯥ ꯁꯦꯃꯗꯨꯅꯥ ꯑꯃꯁꯨꯡ ꯑꯔꯤꯕꯥ ꯃꯦꯞ ꯑꯗꯨꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯅꯥ , ꯅꯠꯠꯔꯒꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯦꯞ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯑꯅꯧꯕꯥ ꯃꯆꯨꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯃꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯅꯧꯕꯥ ꯃꯦꯞ ꯑꯃꯥ ꯁꯦꯃꯒꯅꯤ $custom-colorsꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

ꯃꯦꯄꯇꯒꯤ ꯂꯧꯊꯣꯀꯎ꯫

$theme-colors, ꯅꯠꯠꯔꯒꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯦꯞ ꯑꯃꯍꯦꯛꯇꯗꯒꯤ ꯃꯆꯨ ꯂꯧꯊꯣꯛꯅꯕꯥ , map-remove. ꯈꯉꯖꯤꯅꯕꯤꯌꯨ ꯅꯍꯥꯛꯅꯥ $theme-colorsꯑꯩꯈꯣꯌꯒꯤ ꯗꯔꯀꯥꯔ ꯑꯣꯏꯕꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯃꯁꯤꯒꯤ ꯋꯥꯍꯟꯊꯣꯛ ꯑꯁꯤꯒꯤ ꯃꯇꯨꯡꯗꯥ variablesꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤꯉꯩ ꯃꯃꯥꯡꯗꯥ maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

ꯃꯊꯧ ꯇꯥꯕꯥ ꯀꯤꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤꯖꯤꯟꯅꯈꯤꯕꯥ ꯃꯇꯃꯗꯥ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯀꯛꯅꯕꯥ ꯀꯤ ꯈꯔꯗꯤ ꯂꯩ ꯍꯥꯌꯅꯥ ꯂꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯁꯥꯅꯥ ꯁꯥꯡꯗꯣꯀꯏ꯫ ꯅꯍꯥꯛꯅꯥ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯃꯦꯄꯁꯤꯡ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯑꯀꯛꯅꯕꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯒꯤ ꯀꯤ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯃꯐꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯁꯣꯏꯕꯥ ꯊꯦꯡꯅꯕꯥ ꯌꯥꯏ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ, ꯕꯇꯅꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯐꯣꯔꯝ ꯁ꯭ꯇꯦꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ , primary, successꯑꯃꯁꯨꯡ dangerꯀꯤꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯩ꯫ $theme-colorsꯍꯥꯌꯔꯤꯕꯥ ꯀꯤꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯃꯍꯨꯠ ꯁꯤꯅꯕꯅꯥ ꯏꯁꯨ ꯑꯃꯠꯇꯥ ꯄꯤꯔꯣꯏꯗꯕꯅꯤ, ꯑꯗꯨꯕꯨ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯂꯧꯊꯣꯀꯄꯅꯥ ꯁꯥꯁ ꯀꯝꯄꯥꯏꯂꯦꯁꯅꯒꯤ ꯏꯁꯨꯁꯤꯡ ꯊꯣꯀꯍꯅꯕꯥ ꯌꯥꯏ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯏꯟꯁꯇꯦꯟꯁꯅꯁꯤꯡ ꯑꯁꯤꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯁꯥꯁ ꯀꯣꯗ ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯇꯧꯕꯥ꯫

ꯃꯆꯨꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯂꯩꯔꯤꯕꯥ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ, ꯊꯤꯝ ꯃꯆꯨꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯇꯦꯟꯗꯂꯣꯟ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯅꯥꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ, ꯃꯗꯨꯗꯤ $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯃꯁꯨꯡ shade-color()ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯆꯨꯁꯤꯡ ꯃꯉꯥꯜ ꯄꯤꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯍꯅꯕꯥ ꯌꯥꯏ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯆꯨꯁꯤꯡ ꯑꯁꯤ ꯕ꯭ꯂꯦꯛ ꯅꯠꯠꯔꯒꯥ ꯍꯣꯏꯠꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯤꯛꯁ ꯇꯧꯒꯅꯤ, ꯃꯁꯤ ꯁꯥꯁꯀꯤ ꯅꯦꯇꯤꯕ lighten()ꯑꯃꯁꯨꯡ darken()ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯅꯥ ꯃꯉꯥꯜ ꯑꯗꯨ ꯂꯦꯞꯄꯥ ꯂꯩꯇꯅꯥ ꯍꯣꯡꯗꯣꯛꯀꯅꯤ, ꯃꯁꯤꯅꯥ ꯑꯌꯥꯝꯕꯅꯥ ꯑꯄꯥꯝꯕꯥ ꯏꯐꯦꯛꯇ ꯑꯗꯨ ꯊꯣꯀꯍꯜꯂꯣꯏ꯫

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

ꯆꯠꯅꯕꯤꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯐꯉ꯭ꯀꯁꯟ ꯑꯗꯨ ꯀꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯆꯨ ꯑꯃꯁꯨꯡ ꯑꯔꯨꯝꯕꯥ ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯒꯅꯤ꯫

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

ꯃꯆꯨꯒꯤ ꯀꯟꯠꯔꯁ꯭ꯠ꯫

ꯋꯦꯕ ꯀꯟꯇꯦꯟꯇ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯒꯥꯏꯗꯂꯥꯏꯅꯁꯤꯡ (WCAG) ꯀꯟꯠꯔꯁ꯭ꯇꯀꯤ ꯃꯊꯧ ꯇꯥꯕꯁꯤꯡ ꯑꯗꯨ ꯐꯪꯍꯟꯅꯕꯒꯤꯗꯃꯛ , ꯑꯣꯊꯣꯔꯤꯇꯤꯁꯤꯡꯅꯥ ꯌꯥꯝꯅꯥ ꯅꯦꯝꯕꯥ ꯑꯦꯛꯁꯦꯞꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯃꯤꯅꯤꯃꯝ ꯇꯦꯛꯁꯠ ꯃꯆꯨꯒꯤ ꯀꯟꯠꯔꯁ꯭ꯠ 4.5:1 ꯑꯃꯁꯨꯡ ꯃꯤꯅꯤꯃꯝ ꯅꯟ-ꯇꯦꯛꯁ ꯃꯆꯨꯒꯤ ꯀꯟꯠꯔꯁ꯭ꯠ 3:1 ꯄꯤꯒꯗꯕꯅꯤ꯫

ꯃꯁꯤꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ color-contrastꯐꯉ꯭ꯀꯁꯟ ꯑꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯌꯥꯑꯣꯍꯅꯈꯤ꯫ ꯃꯁꯤꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯕꯦꯖ ꯃꯆꯨꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯃꯉꯥꯜ ( ), ꯑꯃꯝꯕꯥ ( ) ꯅꯠꯠꯔꯒꯥ ꯕ꯭ꯂꯦꯛ ( ) ꯀꯟꯠꯔꯁ꯭ꯠ ꯃꯆꯨ ꯑꯃꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯍꯜꯂꯀꯍꯟꯅꯕꯥ ꯃꯆꯨꯒꯤ ꯁ꯭ꯄꯦꯁ ꯑꯃꯗꯥ ꯔꯤꯂꯦꯇꯤꯕ ꯂꯨꯃꯤꯅꯦꯟꯁꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯀꯟꯠꯔꯁ꯭ꯠ ꯊ꯭ꯔꯦꯁꯍꯣꯜꯗꯁꯤꯡ ꯂꯦꯄꯊꯣꯛꯅꯕꯥ ꯋꯥ.ꯁꯤ.ꯑꯦ.ꯖꯤ . ꯐꯉ꯭ꯀꯁꯟ ꯑꯁꯤ ꯃꯔꯨꯑꯣꯏꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯂꯨꯄꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯀꯥꯟꯅꯕꯥ ꯑꯣꯏ꯫sRGB#fff#212529#000

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯒꯤ $theme-colorsꯃꯦꯄꯇꯒꯤ ꯃꯆꯨꯒꯤ ꯁ꯭ꯕꯆꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

ꯃꯁꯤ ꯋꯥꯟ-ꯑꯣꯐ ꯀꯟꯠꯔꯦꯁ꯭ꯇꯀꯤ ꯃꯊꯧ ꯇꯥꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

ꯑꯩꯈꯣꯌꯒꯤ ꯃꯆꯨꯒꯤ ꯃꯦꯞ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯦꯖ ꯃꯆꯨ ꯑꯃꯁꯨ ꯇꯥꯀꯄꯥ ꯌꯥꯏ:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

ꯑꯦꯁ.ꯚꯤ.ꯖꯤ.ꯗꯒꯤ ꯑꯦꯁ꯭ꯀꯦꯞ ꯇꯧꯕꯥ꯫

ꯑꯩꯈꯣꯌꯅꯥ escape-svgꯐꯉ꯭ꯀꯁꯟ ꯑꯁꯤ <, >ꯑꯃꯁꯨꯡ #SVG ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯏꯃꯦꯖꯁꯤꯡꯒꯤꯗꯃꯛ ꯀꯦꯔꯦꯛꯇꯔꯁꯤꯡ ꯑꯦꯁ꯭ꯀꯦꯞ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯐꯉ꯭ꯀꯁꯟ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ escape-svg, ꯗꯦꯇꯥ URIꯁꯤꯡ ꯀꯣꯠ ꯇꯧꯒꯗꯕꯅꯤ꯫

ꯑꯦꯗ ꯑꯃꯁꯨꯡ ꯁꯕꯠꯔꯦꯛꯇ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯐꯉ꯭ꯀꯁꯟ ꯑꯁꯤ ꯔꯦꯞ ꯇꯧꯅꯕꯥ addꯑꯃꯁꯨꯡ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯄꯥꯟꯗꯃꯗꯤ “ꯌꯨꯅꯤꯠ ꯂꯩꯇꯕꯥ” ꯚꯦꯜꯌꯨ ꯑꯃꯥ ꯑꯦꯛꯁꯞꯔꯦꯁꯟ ꯑꯃꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯁꯣꯏꯕꯥ ꯊꯣꯀꯍꯟꯗꯕꯅꯤ꯫ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯑꯦꯛꯁꯞꯔꯦꯁꯅꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯦꯊꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯆꯨꯝꯕꯥ ꯑꯣꯏꯔꯕꯁꯨ, ꯕ꯭ꯔꯥꯎꯖꯔ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯦꯔꯥꯔ ꯑꯃꯥ ꯍꯜꯂꯛꯀꯅꯤ꯫subtractcalc0calccalc(10px - 0)

ꯀꯦꯂꯁꯤꯌꯝ ꯑꯁꯤ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯃꯐꯃꯁꯤꯡꯒꯤ ꯈꯨꯗꯝ:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

ꯀꯦꯂꯁꯤꯌꯝ ꯑꯁꯤ ꯑꯁꯣꯌꯕꯥ ꯑꯣꯏꯗꯕꯥ ꯃꯐꯃꯁꯤꯡꯒꯤ ꯈꯨꯗꯝ:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

ꯃꯤꯛꯁꯅꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯒꯤ scss/mixins/ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤꯗꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯔꯨꯀꯁꯤꯡꯗꯥ ꯄꯥꯋꯔ ꯄꯤꯕꯥ ꯃꯤꯛꯁꯤꯅꯁꯤꯡꯒꯤ ꯇꯟ ꯑꯃꯥ ꯂꯩ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯑꯗꯣꯃꯒꯤ ꯏꯁꯥꯒꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯄꯨꯝꯅꯃꯀꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫

ꯃꯆꯨꯒꯤ ꯁ꯭ꯀꯤꯃꯁꯤꯡ꯫

prefers-color-schemeꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤꯗꯃꯛ ꯁꯣꯔꯇꯍꯦꯟꯗ ꯃꯤꯛꯁꯤꯟ ꯑꯃꯥ light, dark, ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯝ ꯃꯆꯨꯒꯤ ꯁ꯭ꯀꯤꯃꯁꯤꯡꯒꯤ ꯁꯄꯣꯔꯠ ꯌꯥꯑꯣꯕꯥ ꯐꯪꯒꯅꯤ꯫

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}