ꯊꯤꯃꯤꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯌꯥꯞ꯫
ꯐꯖꯅꯥ ꯊꯤꯃꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯒꯤ ꯄꯁꯟꯗꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯅꯧꯕꯥ ꯕꯤꯜꯇ-ꯏꯟ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯴ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯤꯌꯨ꯫
distꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯳ꯗꯥ, ꯊꯤꯃꯤꯡ ꯑꯁꯤ ꯑꯌꯥꯝꯕꯅꯥ LESS, ꯀꯁ꯭ꯇꯝ CSS, ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯐꯥꯏꯂꯁꯤꯡꯗꯥ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯊꯤꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯑꯃꯗꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯚꯔꯔꯥꯏꯗꯁꯤꯡꯅꯥ ꯊꯧꯒꯠꯈꯤ꯫ ꯍꯣꯠꯅꯕꯥ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ ꯀꯣꯔ ꯐꯥꯏꯂꯁꯤꯡ ꯊꯨꯒꯥꯏꯗꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯳ꯒꯤ ꯂꯨꯛ ꯑꯁꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯴ꯅꯥ ꯆꯦꯅꯕꯥ, ꯑꯗꯨꯕꯨ ꯈꯔꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯦꯞꯔꯣꯆ ꯑꯃꯥ ꯄꯤꯔꯤ꯫
ꯍꯧꯖꯤꯛꯇꯤ, ꯊꯤꯃꯤꯡ ꯑꯁꯤ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ, ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯍꯦꯟꯅꯥ ꯀꯠꯊꯣꯛꯂꯕꯥ ꯊꯤꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ; ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯅꯍꯥꯛꯅꯥ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇꯁꯤꯡ, ꯁꯦꯟꯗꯣꯡꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯅꯕꯥ ꯕꯤꯜꯇ-ꯏꯟ ꯊꯤꯝ ꯑꯗꯨ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫
ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ, ꯃꯦꯄꯁꯤꯡ, ꯃꯤꯛꯁꯤꯅꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥꯒꯤ ꯀꯥꯟꯅꯕꯥ ꯂꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯌꯥꯔꯤꯕꯃꯈꯩ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯣꯔ ꯐꯥꯏꯂꯁꯤꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯔꯣꯏꯗꯕꯅꯤ꯫ ꯁꯥꯁꯀꯤ ꯑꯣꯏꯅꯗꯤ, ꯃꯗꯨꯒꯤ ꯑꯔꯊꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯇꯦꯟꯗ ꯇꯧꯕꯥ ꯌꯥꯅꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯁꯦꯝꯕꯥ ꯍꯥꯌꯕꯅꯤ꯫ ꯅꯍꯥꯛꯅꯥ 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ꯐ꯭ꯂꯦꯒ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯄꯥ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯥ ꯍꯥꯟꯅꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯈ꯭ꯔꯕꯗꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯃꯁꯤ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯂꯩꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨꯁꯤꯡꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯔꯣꯏ.
ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯁꯥꯁ ꯐꯥꯏꯂꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯚꯔꯔꯥꯏꯗꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯇꯨꯡꯗꯥ ꯂꯥꯀꯄꯥ ꯌꯥꯏ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯀꯤ ꯑꯣꯚꯔꯔꯥꯏꯗꯁꯤꯡ ꯑꯗꯨ ꯅꯍꯥꯛꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ ꯂꯥꯛꯀꯗꯕꯅꯤ꯫
npmꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ Bootstrap ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯃꯁꯨꯡ 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:
$theme-colors: map-remove($theme-colors, "success", "info", "danger");ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤꯖꯤꯟꯅꯈꯤꯕꯥ ꯃꯇꯃꯗꯥ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯀꯛꯅꯕꯥ ꯀꯤ ꯈꯔꯗꯤ ꯂꯩ ꯍꯥꯌꯅꯥ ꯂꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯁꯥꯅꯥ ꯁꯥꯡꯗꯣꯀꯏ꯫ ꯅꯍꯥꯛꯅꯥ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯃꯦꯄꯁꯤꯡ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯑꯀꯛꯅꯕꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯒꯤ ꯀꯤ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯃꯐꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯁꯣꯏꯕꯥ ꯊꯦꯡꯅꯕꯥ ꯌꯥꯏ꯫
ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ, ꯕꯇꯅꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯐꯣꯔꯝ ꯁ꯭ꯇꯦꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ , 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`
}ꯑꯩꯈꯣꯌꯒꯤ ꯕꯤꯜꯇ-ꯏꯟ ꯀꯁ꯭ꯇꯝ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯐꯥꯏꯂꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯴ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯑꯅꯧꯕꯥ $enable-*ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯄꯁꯟꯗꯁꯤꯡ ꯐꯖꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯕꯤꯌꯨ꯫ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯒꯤ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧ ꯑꯃꯁꯨꯡ npm run testꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧ꯫
_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-hover-media-query |
trueꯅꯠꯔꯒꯥ false(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) |
ꯗꯤꯞꯔꯦꯛꯇꯦꯗ ꯑꯣꯏꯕꯥ꯫ |
$enable-grid-classes |
true(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫false |
ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯤꯗꯃꯛ CSS ꯀ꯭ꯂꯥꯁꯁꯤꯡ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .container, .row, .col-md-1, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ) ꯁꯦꯃꯒꯠꯄꯥ ꯉꯃꯍꯜꯂꯤ꯫ |
$enable-caret |
true(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫false |
ꯑꯣꯟ ꯁ꯭ꯌꯨꯗꯣ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯀꯦꯔꯦꯠ ꯏꯅꯦꯕꯜ ꯇꯧꯏ .dropdown-toggle. |
$enable-print-styles |
true(ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ꯫false |
ꯄ꯭ꯔꯤꯟꯇꯤꯡ ꯑꯣꯞꯇꯤꯃꯥꯏꯖ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯏ꯫ |
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀꯌꯥ ꯑꯁꯤ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ ꯃꯆꯨꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯥꯕꯅꯤ꯫ ꯃꯦꯞ ꯑꯁꯤ ꯔꯨꯂꯁꯦꯠꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯥ ꯊꯨꯅꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯥꯁꯇꯥ ꯂꯨꯞ ꯇꯧꯕꯥ ꯌꯥꯏ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯴ꯗꯥ ꯐꯪꯂꯤꯕꯥ ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛ, ꯑꯩꯈꯣꯌꯒꯤ 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ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯄꯨꯝꯕꯗꯥ ꯑꯉꯧꯕꯥ ꯃꯆꯨꯒꯤ ꯂꯦꯡꯗꯕꯥ ꯁꯦꯠꯁꯤꯡꯒꯤꯗꯃꯛ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯥ ꯏꯟ꯫
ꯃꯅꯨꯡꯗꯥ _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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--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);
}ꯑꯗꯣꯝꯅꯥ ꯑꯗꯣꯃꯒꯤ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ:
.content-secondary {
display: none;
}
@media (min-width(var(--breakpoint-sm))) {
.content-secondary {
display: block;
}
}