ꯊꯤꯃꯤꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯌꯥꯞ꯫

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

ꯁꯛꯇꯥꯛꯄ

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

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

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

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

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

ꯌꯥꯔꯤꯕꯃꯈꯩ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯣꯔ ꯐꯥꯏꯂꯁꯤꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯔꯣꯏꯗꯕꯅꯤ꯫ ꯁꯥꯁꯀꯤ ꯑꯣꯏꯅꯗꯤ, ꯃꯗꯨꯒꯤ ꯑꯔꯊꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯇꯦꯟꯗ ꯇꯧꯕꯥ ꯌꯥꯅꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯁꯦꯝꯕꯥ ꯍꯥꯌꯕꯅꯤ꯫ ꯅꯍꯥꯛꯅꯥ 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

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

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

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

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

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

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

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

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

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

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

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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

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

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

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

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

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

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

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

ꯗꯥ ꯑꯅꯧꯕꯥ ꯃꯆꯨ ꯑꯃꯥ $theme-colorsꯍꯥꯄꯆꯤꯟꯅꯕꯥ, ꯑꯅꯧꯕꯥ ꯀꯤ ꯑꯃꯁꯨꯡ ꯚꯦꯜꯌꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ:

$theme-colors: (
  "custom-color": #900
);

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

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

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

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

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

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

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

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

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

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

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ v3ꯗꯒꯤ ꯃꯆꯨꯒꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯥ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ ꯍꯥꯌꯕꯗꯨꯒꯥ ꯃꯥꯟꯅꯅꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯒꯤ ꯃꯆꯨ ꯑꯃꯥ ꯂꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

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

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

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

.custom-element {
  color: theme-color-level(primary, -10);
}

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

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

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

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

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

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

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

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

.custom-element {
  color: color-yiq(theme-color("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);
}

ꯁꯥꯁ ꯑꯣꯄꯁꯅꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯕꯤꯜꯇ-ꯏꯟ ꯀꯁ꯭ꯇꯝ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯐꯥꯏꯂꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯴ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯅꯧꯕꯥ $enable-*ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯄꯁꯟꯗꯁꯤꯡ ꯐꯖꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯒꯤ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧ ꯑꯃꯁꯨꯡ npm run testꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧ꯫

scss/_variables.scssꯅꯍꯥꯛꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯐꯥꯏꯂꯗꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯒ꯭ꯂꯣꯕꯦꯜ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯊꯤꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯒꯅꯤ꯫

ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯕꯥ꯫	ꯚꯦꯜꯌꯨꯁꯤꯡ꯫	ꯋꯥꯔꯣꯜ
`$spacer`	`1rem`(ꯗꯤꯐꯣꯜꯇ), ꯅꯠꯠꯔꯒꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯍꯦꯛꯇ > 0	ꯑꯩꯈꯣꯌꯒꯤ ꯁ꯭ꯄꯦꯁꯔ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯄ꯭ꯔꯣꯒ꯭ꯔꯥꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯁ꯭ꯄꯦꯁꯔ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯇꯥꯀꯏ .
`$enable-rounded`	`true`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫`false`	`border-radius`ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯏ꯫
`$enable-shadows`	`true`ꯅꯠꯔꯒꯥ `false`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ)	`box-shadow`ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯏ꯫
`$enable-gradients`	`true`ꯅꯠꯔꯒꯥ `false`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ)	`background-image`ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯏ꯫
`$enable-transitions`	`true`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫`false`	`transition`ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯟ ꯇꯧꯔꯕꯥ s ꯏꯅꯦꯕꯜ ꯇꯧꯏ꯫
`$enable-prefers-reduced-motion-media-query`	`true`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫`false`	`prefers-reduced-motion`ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯑꯁꯤ ꯏꯅꯦꯕꯜ ꯇꯧꯏ , ꯃꯁꯤꯅꯥ ꯌꯨꯖꯔꯁꯤꯡꯒꯤ ꯕ꯭ꯔꯥꯎꯖꯔ/ꯑꯣꯄꯔꯦꯇꯤꯡ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯤ ꯄꯁꯟꯗꯁꯤꯡꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ/ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯊꯤꯡꯏ꯫
`$enable-hover-media-query`	`true`ꯅꯠꯔꯒꯥ `false`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ)	ꯗꯤꯞꯔꯦꯛꯇꯦꯗ ꯑꯣꯏꯕꯥ꯫
`$enable-grid-classes`	`true`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫`false`	ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯤꯗꯃꯛ CSS ꯀ꯭ꯂꯥꯁꯁꯤꯡ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, `.container`, `.row`, `.col-md-1`, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ) ꯁꯦꯃꯒꯠꯄꯥ ꯉꯃꯍꯜꯂꯤ꯫
`$enable-caret`	`true`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫`false`	ꯑꯣꯟ ꯁ꯭ꯌꯨꯗꯣ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯀꯦꯔꯦꯠ ꯏꯅꯦꯕꯜ ꯇꯧꯏ `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫`false`	ꯅꯟ-ꯗꯤꯁꯦꯕꯜ ꯑꯣꯏꯕꯥ ꯕꯇꯟ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ “ꯍꯦꯟꯗ” ꯀꯔꯁꯔ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
`$enable-print-styles`	`true`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫`false`	ꯄ꯭ꯔꯤꯟꯇꯤꯡ ꯑꯣꯞꯇꯤꯃꯥꯏꯖ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯏ꯫
`$enable-responsive-font-sizes`	`true`ꯅꯠꯔꯒꯥ `false`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ)	ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯐꯣꯟꯇ ꯁꯥꯏꯖꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯏ .
`$enable-validation-icons`	`true`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫`false`	`background-image`ꯇꯦꯛꯁꯇꯥꯏꯜ ꯏꯅꯄꯨꯠꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯥꯏꯀꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯚꯦꯂꯤꯗꯦꯁꯟ ꯁ꯭ꯇꯦꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯀꯁ꯭ꯇꯝ ꯐꯣꯔꯝ ꯈꯔꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯏ꯫
`$enable-deprecation-messages`	`true`ꯅꯠꯔꯒꯥ `false`(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ)	. `true`_ `v5`_

ꯝꯆꯨ

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀꯌꯥ ꯑꯁꯤ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ ꯃꯆꯨꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯥꯕꯅꯤ꯫ ꯃꯦꯞ ꯑꯁꯤ ꯔꯨꯂꯁꯦꯠꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯥ ꯊꯨꯅꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯥꯁꯇꯥ ꯂꯨꯞ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛ꯫

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

ꯍꯤꯒꯣꯛ

ꯏꯟꯗꯤꯒꯣ꯫

ꯈꯥꯃꯦꯟ ꯃꯆꯨ

ꯂꯩ ꯃꯆꯨ

ꯑꯉꯥꯡꯕ

ꯀꯣꯝꯂꯥ

ꯅꯥꯄꯨ ꯃꯆꯨ

ꯑꯁꯪꯕ

ꯇꯤꯜ꯫

ꯁꯥꯌꯥꯟ ꯇꯧꯕꯥ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯁꯥꯁꯇꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯒꯦ:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

ꯁꯦꯇꯤꯡcolor ꯑꯃꯁꯨꯡ background-color. _

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

ꯊꯤꯃꯒꯤ ꯃꯆꯨꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯁꯕꯁꯦꯠ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯆꯨꯒꯤ ꯁ꯭ꯀꯤꯃꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯃꯆꯨꯒꯤ ꯄꯦꯂꯦꯠ ꯑꯃꯥ ꯁꯦꯝꯃꯤ, ꯃꯁꯤꯁꯨ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯅꯥ ꯑꯃꯁꯨꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ scss/_variables.scssꯐꯥꯏꯂꯗꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯐꯪꯏ꯫

ꯃꯔꯨ ꯑꯣꯏꯕ

ꯁꯦꯀꯦꯟꯗꯔꯤ ꯑꯣꯏꯕꯥ꯫

ꯃꯥꯏ ꯄꯥꯛꯄ

ꯈꯨꯗꯣꯡꯊꯤꯕ

ꯆꯦꯛꯁꯤꯟꯋꯥ

ꯏꯅꯐꯣ

ꯃꯉꯥꯜ

ꯑꯃꯝꯕ

ꯒ꯭ꯔꯦꯁꯁꯤꯡ꯫

ꯑꯉꯧꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯔꯕꯥ ꯁꯦꯠ ꯑꯃꯥ ꯑꯃꯁꯨꯡ scss/_variables.scssꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯄꯨꯝꯕꯗꯥ ꯑꯉꯧꯕꯥ ꯃꯆꯨꯒꯤ ꯂꯦꯡꯗꯕꯥ ꯁꯦꯠꯁꯤꯡꯒꯤꯗꯃꯛ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯥ ꯏꯟ꯫ ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ “ꯀꯨꯜ ꯒ꯭ꯔꯦ”ꯁꯤꯡꯅꯤ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ, ꯃꯈꯣꯌ ꯑꯁꯤ ꯅ꯭ꯌꯨꯠꯔꯤꯑꯦꯟꯇ ꯒ꯭ꯔꯦꯁꯤꯡꯗꯒꯤ ꯍꯦꯟꯅꯥ, ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯕ꯭ꯂꯨ ꯇꯣꯟ ꯑꯃꯒꯤ ꯃꯥꯌꯀꯩꯗꯥ ꯆꯠꯂꯤ꯫

꯱꯰꯰ ꯑꯣꯏꯈꯤ꯫

꯲꯰꯰ ꯑꯣꯏꯈꯤ꯫

꯳꯰꯰ ꯄꯤꯈꯤ꯫

꯴꯰꯰ ꯑꯣꯏꯈꯤ꯫

꯵꯰꯰ ꯄꯤꯈꯤ꯫

꯶꯰꯰ ꯑꯣꯏꯈꯤ꯫

꯷꯰꯰ ꯑꯣꯏꯈꯤ꯫

꯸꯰꯰ ꯑꯣꯏꯈꯤ꯫

꯹꯰꯰ ꯑꯣꯏꯈꯤ꯫

,ꯒꯤ ꯃꯅꯨꯡꯗꯥ scss/_variables.scss, ꯅꯍꯥꯛꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯆꯨꯒꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯁꯥꯁ ꯃꯦꯞ ꯑꯗꯨ ꯐꯪꯒꯅꯤ꯫ ꯃꯈꯥꯗꯥ $colorsꯁꯥꯁ ꯃꯦꯄꯀꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

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

ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ꯫

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

ꯃꯣꯗꯤꯐꯥꯏꯌꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

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

ꯀꯝꯄꯣꯅꯦꯟꯇ $theme-colorsꯑꯗꯨꯗꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯃꯦꯞ ꯑꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯨꯞ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯈꯨꯗꯝ ꯑꯅꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ꯫.alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ꯫

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

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ , ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ $grid-breakpoints, ꯅꯍꯥꯛꯀꯤ ꯑꯍꯣꯡꯕꯁꯤꯡ ꯑꯗꯨ ꯃꯦꯞ ꯑꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ ꯏꯇꯤꯔꯦꯠ ꯇꯧꯔꯤꯕꯥ ꯂꯨꯞ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯒꯅꯤ꯫

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

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

ꯐꯪꯂꯤꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ (ꯅꯣꯠ ꯇꯧꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ the :rootꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯏ)꯫ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ _root.scssꯐꯥꯏꯂꯗꯥ ꯂꯩꯔꯤ꯫

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ꯈꯨꯗꯃꯁꯤꯡ꯫

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

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯑꯍꯥꯅꯕꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ --breakpoint-md. _ ꯍꯥꯌꯔꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯃꯔꯝꯅꯥ ꯕꯦꯀꯋꯥꯔꯗ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤꯒꯤꯗꯃꯛ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯂꯩꯔꯤ꯫ ꯁ꯭ꯄꯦꯛ .

ꯁꯄꯣꯔꯠ ꯇꯧꯗꯕꯥ ꯋꯥꯐꯃꯁꯤꯡꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

ꯑꯃꯁꯨꯡ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤꯕꯥ ꯑꯗꯨꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ :

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}