ꯊꯤꯃꯤꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯌꯥꯞ꯫
ꯐꯖꯅꯥ ꯊꯤꯃꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯒꯤ ꯄꯁꯟꯗꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯅꯧꯕꯥ ꯕꯤꯜꯇ-ꯏꯟ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯴ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯤꯌꯨ꯫
ꯁꯛꯇꯥꯛꯄ
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
// 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";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@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ꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ Bootstrap ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯃꯁꯨꯡ background-color
ꯑꯗꯨ color
ꯍꯣꯡꯗꯣꯛꯂꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯃꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ :<body>
@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/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯎꯅꯥ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯂꯩꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯍꯟꯖꯤꯟ ꯍꯟꯖꯤꯟ ꯇꯧꯕꯤꯌꯨ꯫
ꯃꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯂꯨꯄꯁꯤꯡ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯴ꯗꯥ ꯁꯥꯁ ꯃꯦꯞ ꯃꯁꯤꯡ ꯈꯔꯥ ꯌꯥꯑꯣꯔꯤ, ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯏꯃꯨꯡꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯗꯥ ꯂꯥꯏꯊꯣꯀꯍꯜꯂꯤꯕꯥ ꯃꯔꯨ ꯑꯣꯏꯕꯥ ꯚꯦꯜꯌꯨ ꯄꯦꯌꯥꯔꯁꯤꯡ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯆꯨꯁꯤꯡ, ꯒ꯭ꯔꯤꯗ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥꯒꯤꯗꯃꯛ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯨꯝꯅꯥ, ꯁꯥꯁ ꯃꯦꯞ ꯄꯨꯝꯅꯃꯛꯇꯥ !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
ꯑꯃꯁꯨꯡ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯄꯥꯟꯗꯃꯗꯤ “ꯌꯨꯅꯤꯠ ꯂꯩꯇꯕꯥ” ꯚꯦꯜꯌꯨ ꯑꯃꯥ ꯑꯦꯛꯁꯞꯔꯦꯁꯟ ꯑꯃꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯁꯣꯏꯕꯥ ꯊꯣꯀꯍꯟꯗꯕꯅꯤ꯫ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯑꯦꯛꯁꯞꯔꯦꯁꯅꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯦꯊꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯆꯨꯝꯕꯥ ꯑꯣꯏꯔꯕꯁꯨ, ꯕ꯭ꯔꯥꯎꯖꯔ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯦꯔꯥꯔ ꯑꯃꯥ ꯍꯜꯂꯛꯀꯅꯤ꯫subtract
calc
0
calc
calc(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 ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯏ꯫ box-shadow ꯐꯣꯀꯁ ꯁ꯭ꯇꯦꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ s ꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯗꯦ꯫ |
$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 |
. false _ 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", "Liberation 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);
}
}