Source

Theming Bootstrap

လွယ်ကူသော အပြင်အဆင်နှင့် အစိတ်အပိုင်းပြောင်းလဲမှုများအတွက် ကမ္ဘာလုံးဆိုင်ရာစတိုင်စိတ်ကြိုက်ရွေးချယ်မှုများအတွက် ကျွန်ုပ်တို့၏ built-in Sass variable အသစ်များဖြင့် Bootstrap 4 ကို စိတ်ကြိုက်ပြင်ဆင်ပါ။

နိဒါန်း

Bootstrap 3 တွင်၊ အပြင်အဆင်ကို LESS၊ စိတ်ကြိုက် CSS နှင့် ကျွန်ုပ်တို့၏ distဖိုင်များတွင် ကျွန်ုပ်တို့ထည့်သွင်းထားသည့် သီးခြားပုံစံစာရွက်တစ်ခုတွင် ပြောင်းလဲနိုင်သော ပြောင်းလဲနိုင်သော overrides များက အဓိကအားဖြင့် မောင်းနှင်ပေးပါသည်။ အားထုတ်မှုအနည်းငယ်ဖြင့်၊ တစ်ဦးသည် core ဖိုင်များကိုမထိဘဲ Bootstrap 3 ၏အသွင်အပြင်ကို လုံးဝပြန်လည်ဒီဇိုင်းထုတ်နိုင်သည်။ Bootstrap 4 သည် အကျွမ်းတဝင်ရှိသော်လည်း အနည်းငယ်ကွဲပြားသောချဉ်းကပ်မှုကို ပေးသည်။

ယခုအခါ Sass variables၊ Sass မြေပုံများနှင့် စိတ်ကြိုက် CSS တို့ဖြင့် အပြင်အဆင်ကို ပြီးမြောက်ပါပြီ။ အထူးသီးသန့် အပြင်အဆင် ပုံစံစာရွက် မရှိတော့ပါ။ ယင်းအစား၊ သင်သည် gradients၊ shadows နှင့် အခြားအရာများထည့်ရန် built-in theme ကိုဖွင့်နိုင်သည်။

ဆူး

ကိန်းရှင်များ၊ မြေပုံများ၊ ရောနှောခြင်းနှင့် အခြားအရာများကို အခွင့်ကောင်းယူရန် ကျွန်ုပ်တို့၏ အရင်းအမြစ် Sass ဖိုင်များကို အသုံးပြုပါ။

ဖိုင်ဖွဲ့စည်းပုံ

ဖြစ်နိုင်သည့်အခါတိုင်း၊ Bootstrap ၏ အဓိကဖိုင်များကို မွမ်းမံပြင်ဆင်ခြင်းကို ရှောင်ကြဉ်ပါ။ Sass အတွက်၊ ဆိုလိုသည်မှာ သင်သည် ၎င်းကို ပြင်ဆင်ပြီး တိုးချဲ့နိုင်စေရန်အတွက် Bootstrap ကို တင်သွင်းသည့် သင်၏ကိုယ်ပိုင်စတိုင်စာရွက်ကို ဖန်တီးခြင်းကို ဆိုလိုသည်။ npm ကဲ့သို့ ပက်ကေ့ဂျ်မန်နေဂျာကို သင်အသုံးပြုနေသည်ဟု ယူဆပါက၊ သင့်တွင် ဤကဲ့သို့သော ဖိုင်ဖွဲ့စည်းပုံတစ်ခု ရှိလိမ့်မည်-

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

အကယ်၍ သင်သည် ကျွန်ုပ်တို့၏ အရင်းအမြစ်ဖိုင်များကို ဒေါင်းလုဒ်လုပ်ထားပြီး ပက်ကေ့ဂျ်မန်နေဂျာကို အသုံးမပြုပါက၊ Bootstrap ၏ အရင်းအမြစ်ဖိုင်များကို သင့်ကိုယ်ပိုင်နှင့် သီးခြားထားရှိရန်၊ ထိုဖွဲ့စည်းပုံနှင့် ဆင်တူသည့်အရာတစ်ခုကို သင်ကိုယ်တိုင် စနစ်ထည့်သွင်းလိုမည်ဖြစ်သည်။

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

တင်သွင်းခြင်း။

သင့် custom.scssတွင်၊ သင်သည် Bootstrap ၏အရင်းအမြစ် Sass ဖိုင်များကို တင်သွင်းမည်ဖြစ်သည်။ သင့်တွင် ရွေးချယ်စရာ နှစ်ခုရှိသည်- Bootstrap အားလုံးကို ထည့်သွင်းပါ၊ သို့မဟုတ် သင်လိုအပ်သည့် အစိတ်အပိုင်းများကို ရွေးပါ။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏အစိတ်အပိုင်းများတစ်လျှောက်တွင် လိုအပ်ချက်များနှင့် မှီခိုမှုအချို့ရှိနေသည်ကို သတိပြုမိသော်လည်း နောက်ပိုင်းကို အားပေးပါသည်။ ကျွန်ုပ်တို့၏ ပလပ်အင်များအတွက် JavaScript အချို့ကိုလည်း သင်ထည့်သွင်းရန်လိုအပ်ပါသည်။

// 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";

ထိုထည့်သွင်းမှုဖြင့်၊ သင့်ရှိ Sass variable များနှင့် မြေပုံများကို စတင်ပြင်ဆင် custom.scssနိုင်ပါသည်။ // Optionalလိုအပ်သလို ကဏ္ဍ အောက်တွင် Bootstrap ၏ အစိတ်အပိုင်းများကို စတင်ထည့်သွင်းနိုင်သည် ။ bootstrap.scssသင်၏အစမှတ်အဖြစ် ကျွန်ုပ်တို့၏ဖိုင် မှ တင်သွင်းသည့်အစုအစည်းအပြည့်အစုံကို အသုံးပြုရန် ကျွန်ုပ်တို့အကြံပြုအပ်ပါသည် ။

ပြောင်းလဲနိုင်သော ပုံသေများ

Bootstrap 4 ရှိ Sass variable တိုင်းတွင် !defaultBootstrap ၏အရင်းအမြစ်ကုဒ်ကိုမွမ်းမံခြင်းမပြုဘဲ သင့်ကိုယ်ပိုင် Sass တွင် variable ၏မူလတန်ဖိုးကို ကျော်ရန်ခွင့်ပြုသောအလံပါရှိသည်။ ကိန်းရှင်များကို လိုအပ်သလို ကူးယူပြီး ကူးထည့်ပါ၊ ၎င်းတို့၏ တန်ဖိုးများကို ပြင်ဆင်ပါ၊ !defaultအလံကို ဖယ်ရှားပါ။ ကိန်းရှင်တစ်ခုကို သတ်မှတ်ပေးထားပြီးဖြစ်ပါက၊ ၎င်းကို Bootstrap ရှိ မူရင်းတန်ဖိုးများဖြင့် ပြန်လည်သတ်မှတ်ပေးမည်မဟုတ်ပါ။

တူညီသော Sass ဖိုင်အတွင်းတွင် ပြောင်းလဲနိုင်သော ပြောင်းလဲနိုင်သော အစားထိုးမှုများသည် မူရင်းကိန်းရှင်များ ရှေ့ သို့မဟုတ် နောက်တွင် လာနိုင်သည်။ သို့သော်၊ Sass ဖိုင်များကို ဖြတ်ကျော်သည့်အခါ၊ Bootstrap ၏ Sass ဖိုင်များကို သင်မတင်သွင်းမီ သင်၏ overrides များသည် လာရပါမည်။

ဤသည်မှာ 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";

အောက်ဖော်ပြပါ ကမ္ဘာလုံးဆိုင်ရာ ရွေးချယ်စရာများအပါအဝင် Bootstrap ရှိ မည်သည့် variable အတွက်မဆို လိုအပ်သလို ပြန်လုပ်ပါ။

မြေပုံများနှင့် ကွင်းများ

Bootstrap 4 တွင် Sass မြေပုံများ လက်တစ်ဆုပ်စာ၊ ဆက်စပ် CSS ၏ မိသားစုများကို ထုတ်လုပ်ရန် ပိုမိုလွယ်ကူစေသည့် သော့တန်ဖိုးအတွဲများ ပါဝင်သည်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏အရောင်များ၊ ဇယားကွက်ခွဲမှတ်များနှင့် အခြားအရာများအတွက် Sass မြေပုံများကို အသုံးပြုပါသည်။ Sass variable များကဲ့သို့ပင်၊ Sass မြေပုံများအားလုံးတွင် !defaultအလံပါ၀င်ပြီး overridden နှင့် ထပ်တိုးနိုင်သည်။

ကျွန်ုပ်တို့၏ Sass မြေပုံအချို့ကို မူရင်းအတိုင်း ကွက်လပ်များအဖြစ် ပေါင်းစပ်ထားသည်။ ၎င်းသည် ပေးထားသော Sass မြေပုံကို လွယ်ကူစွာ ချဲ့ထွင်ရန် လုပ်ဆောင်သော်လည်း၊ မြေပုံ တစ်ခုမှ အရာများကို ဖယ်ရှား ရာတွင် အနည်းငယ် ပိုခက်ခဲသည်။

မြေပုံကို ပြင်ဆင်ပါ။

ကျွန်ုပ်တို့၏မြေပုံ တွင် ရှိပြီးသားအရောင်တစ်ခုကို မွမ်းမံရန် $theme-colors၊ သင့်စိတ်ကြိုက် Sass ဖိုင်သို့ အောက်ပါတို့ကို ထည့်ပါ-

$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");

လိုအပ်သောသော့များ

Bootstrap သည် Sass မြေပုံများအတွင်း အချို့သောသော့များရှိနေခြင်းကို ကျွန်ုပ်တို့အသုံးပြုပြီး ၎င်းတို့ကိုယ်တိုင် တိုးချဲ့လုပ်ဆောင်သည်ဟု ယူဆပါသည်။ ပါဝင်သောမြေပုံများကို သင်စိတ်ကြိုက်ပြင်ဆင်သည့်အခါ၊ Sass မြေပုံ၏သော့ကို အသုံးပြုသည့်နေရာတွင် အမှားအယွင်းများကြုံတွေ့ရနိုင်သည်။

ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့သည် လင့်ခ်များ၊ ခလုတ်များ၊ နှင့် ဖောင်ပုံစံပြည်နယ်များအတွက် primary၊ successနှင့် dangerသော့များကို အသုံးပြုသည်။ $theme-colorsဤသော့များ၏တန်ဖိုးများကို အစားထိုးခြင်းသည် ပြဿနာမရှိသင့်သော်လည်း ၎င်းတို့ကို ဖယ်ရှားခြင်းသည် Sass စုစည်းမှုဆိုင်ရာ ပြဿနာများကို ဖြစ်စေနိုင်သည်။ ဤအခြေအနေမျိုးတွင်၊ ထိုတန်ဖိုးများကို အသုံးပြုနိုင်သော Sass ကုဒ်ကို သင်မွမ်းမံရန်လိုအပ်ပါသည်။

လုပ်ဆောင်ချက်များ

Bootstrap သည် Sass လုပ်ဆောင်ချက်များစွာကို အသုံးပြုသော်လည်း အထွေထွေအပြင်အဆင်အတွက် အစုခွဲတစ်ခုသာ အသုံးပြုနိုင်သည်။ အရောင်မြေပုံများမှ တန်ဖိုးများရယူရန်အတွက် ကျွန��ုပ်တို့တွင် လုပ်ဆောင်ချက်များ သုံးခုပါဝင်သည်-

@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 မှအရောင်ပြောင်းနိုင်သောအရောင်ကို သင်အသုံးပြုပုံကဲ့သို့ Sass မြေပုံတစ်ခုမှတစ်ရောင်ကို ရွေးချယ်နိုင်စေပါသည်။

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

လက်တွေ့တွင်၊ သင်သည် function ကိုခေါ်ဆိုပြီး ကန့်သတ်ချက်နှစ်ခုဖြင့်ဖြတ်သန်းသည် $theme-colors- (ဥပမာ၊ မူလ သို့မဟုတ် အန္တရာယ်) မှ အရောင်အမည်နှင့် ဂဏန်းအဆင့်တစ်ခု။

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

နောက်ထပ် Sass မြေပုံများအတွက် အဆင့်လုပ်ဆောင်ချက်များကို ဖန်တီးရန် သို့မဟုတ် သင်ပို၍ စကားများလိုပါက ယေဘုယျအားဖြင့် အပိုလုပ်ဆောင်ချက်များကို အနာဂတ်တွင် ထည့်သွင်းနိုင်သည် သို့မဟုတ် သင့်စိတ်ကြိုက် Sass ကို ထည့်သွင်းနိုင်သည်။

အရောင်ခြားနားမှု

Bootstrap တွင်ကျွန်ုပ်တို့ပါ ၀ င်သည့်နောက်ထပ်လုပ်ဆောင်မှုတစ်ခုမှာအရောင်အဆင်းဆန့်ကျင်ဘက်လုပ်ဆောင်ချက် color-yiqဖြစ်သည်။ သတ်မှတ်ထားသော အခြေခံအရောင်ပေါ်အခြေခံ၍ အလင်း ( ) သို့မဟုတ် အမှောင် ( ) ဆန့်ကျင်ဘက်အရောင် ကို အလိုအလျောက်ပြန်ပေးရန် YIQ အရောင်အာကာသ ကို အသုံးပြုသည် ။ ဤလုပ်ဆောင်ချက်သည် သင်အတန်းများစွာကို ဖန်တီးနေသည့် mixins သို့မဟုတ် loops အတွက် အထူးအသုံးဝင်သည်။#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`
}

Sass ရွေးချယ်မှုများ

Bootstrap 4 ကို ကျွန်ုပ်တို့၏ built-in စိတ်ကြိုက် variables ဖိုင်ဖြင့် စိတ်ကြိုက်ပြင်ဆင်ပြီး $enable-*Sass variables အသစ်များဖြင့် ကမ္ဘာလုံးဆိုင်ရာ CSS စိတ်ကြိုက်များကို အလွယ်တကူ ပြောင်းနိုင်သည်။ ကိန်းရှင်၏တန်ဖိုးကို အစားထိုးပြီး npm run testလိုအပ်သလို ပြန်လည်ပေါင်းစည်းပါ။

_variables.scssကျွန်ုပ်တို့၏ ဖိုင် ရှိ အဓိက ကမ္ဘာလုံးဆိုင်ရာ ရွေးချယ်မှုများအတွက် ဤကိန်းရှင်များကို သင်ရှာဖွေပြီး စိတ်ကြိုက်ပြင်ဆင် နိုင်ပါသည်။

ပြောင်းလဲနိုင်သော	တန်ဖိုးများ	ဖော်ပြချက်
`$spacer`	`1rem`(မူလ) သို့မဟုတ် မည်သည့်တန်ဖိုး > 0	ကျွန်ုပ်တို့၏ spacer utilities များကို ပရိုဂရမ်ဖြင့် ထုတ်ပေးရန်အတွက် မူရင်း spacer တန်ဖိုးကို သတ်မှတ်သည် ။
`$enable-rounded`	`true`(မူလ) သို့မဟုတ်`false`	`border-radius`အစိတ်အပိုင်းအမျိုးမျိုးတွင် ကြိုတင်သတ်မှတ်ထားသောစတိုင်များကို ဖွင့် ပါ။
`$enable-shadows`	`true`သို့မဟုတ် `false`(ပုံသေ)	`box-shadow`အစိတ်အပိုင်းအမျိုးမျိုးတွင် ကြိုတင်သတ်မှတ်ထားသောစတိုင်များကို ဖွင့် ပါ။
`$enable-gradients`	`true`သို့မဟုတ် `false`(ပုံသေ)	`background-image`အစိတ်အပိုင်းအမျိုးမျိုးရှိ စတိုင်များ မှတစ်ဆင့် ကြိုတင်သတ်မှတ်ထားသော gradient ကိုဖွင့် ပါ။
`$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`	pseudo ဒြပ်စင်ဂရုကိုပေါ်တွင်ဖွင့်ပါ `.dropdown-toggle`။
`$enable-print-styles`	`true`(မူလ) သို့မဟုတ်`false`	ပုံနှိပ်စက်ကို အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ရန် စတိုင်များကို ဖွင့်ပါ။

အရောင်

Bootstrap ၏ အမျိုးမျိုးသော အစိတ်အပိုင်းများနှင့် အသုံးအဆောင်များစွာကို Sass မြေပုံတွင် သတ်မှတ်ထားသော အရောင်အစီအရီများဖြင့် တည်ဆောက်ထားသည်။ စည်းမျဥ်းများ အမြန်ထုတ်ပေးရန် ဤမြေပုံကို Sass တွင် လှည့်ပတ်နိုင်သည်။

အရောင်အားလုံး

Bootstrap 4 တွင်ရရှိနိုင်သောအရောင်အားလုံးသည် Sass variable များနှင့်ကျွန်ုပ်တို့၏ scss/_variables.scssဖိုင်ရှိ Sass မြေပုံအဖြစ်ရရှိနိုင်သည်။ ကျွန်ုပ်တို့ပါဝင်ပြီးသား မီးခိုးရောင်စကေး palette ကဲ့သို့ အပိုဆောင်းအရိပ်များထည့်ရန်အတွက် ၎င်းကို နောက်ဆက်တွဲထုတ်ဝေမှုများတွင် တိုးချဲ့ပါမည် ။

အပြာ

မဲနယ်

ခရမ်းရောင်

ပန်းရောင်

အနီေရာင်

လိမ္မော်သီး

အဝါရောင်

အစိမ်းရောင်

စိမ်းပြာရောင်

အစိမ်းနုရောင်

ဤသည်မှာ သင်၏ Sass တွင် ၎င်းတို့ကို မည်သို့အသုံးပြုနိုင်သည်နည်း။

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

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

ရောင်စုံ အသုံးဝင်မှု အတန်း များကို ဆက်တင် colorနှင့် အသုံးပြုနိုင်မည် background-colorဖြစ်သည်။

အနာဂတ်တွင်၊ အောက်ဖော်ပြပါ မီးခိုးရောင်စကေးအရောင်များဖြင့် ပြုလုပ်ထားသည့်အတိုင်း အရောင်တစ်ခုစီ၏ အရိပ်များအတွက် Sass မြေပုံများနှင့် ကွဲပြားမှုများကို ပံ့ပိုးပေးနိုင်ရန် ရည်ရွယ်ပါသည်။

အပြင်အဆင် အရောင်များ

scss/_variables.scssကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ ဖိုင် ရှိ Sass variable များနှင့် Sass မြေပုံကဲ့သို့ရရှိနိုင်သော အရောင်အစီအစဥ်များဖန်တီးရန်အတွက် သေးငယ်သောအရောင်အလွှာတစ်ခုဖန်တီးရန် အရောင်အားလုံး၏အခွဲတစ်ခုကို ကျွန်ုပ်တို့ အသုံးပြုပါသည်။

မူလတန်း

အလယ်တန်း

အောင်မြင်မှု

အန္တရာယ်

သတိပေးချက်

အချက်အလက်

အလင်း

မှောငျမိုကျသော

မီးခိုးရောင်

scss/_variables.scssသင့်ပရောဂျက်တစ်လျှောက် မီးခိုးရောင်အရိပ်များအတွက် ကျယ်ပြန့်သော မီးခိုးရောင်ပြောင်းလဲမှုများနှင့် Sass မြေပုံတစ်ခု ။

၁၀၀

၂၀၀

၃၀၀

၄၀၀

၅၀၀

၆၀၀

၇၀၀

၈၀၀

၉၀၀

အတွင်းတွင် _variables.scss၊ ကျွန်ုပ်တို့၏အရောင်ပြောင်းလဲနိုင်သောများနှင့် Sass မြေပုံကိုတွေ့ရပါမည်။ ဤသည်မှာ $colorsSass မြေပုံ၏ ဥပမာတစ်ခုဖြစ်သည်။

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

အခြားအစိတ်အပိုင်းများစွာတွင် ၎င်းတို့ကိုအသုံးပြုပုံကို အပ်ဒိတ်လုပ်ရန်အတွက် မြေပုံအတွင်းတန်ဖိုးများကို ပေါင်းထည့်၊ ဖယ်ရှားရန် သို့မဟုတ် ပြင်ဆင်ပါ။ ကံမကောင်းစွာပဲ၊ ဒီအချိန်မှာ အစိတ်အပိုင်း တိုင်း က ဒီ Sass မြေပုံကို အသုံးမပြုပါဘူး။ အနာဂတ် အပ်ဒိတ်များသည် ယင်းအပေါ် ပိုမိုကောင်းမွန်လာစေရန် ကြိုးပမ်းပါမည်။ ထိုအချိန်အထိ ${color}variable များနှင့် ဤ Sass မြေပုံကို အသုံးပြုရန် စီစဉ်ပါ။

အစိတ်အပိုင်းများ

Bootstrap ၏ အစိတ်အပိုင်းများနှင့် အသုံးအဆောင်များစွာကို @eachSass မြေပုံပေါ်တွင် ထပ်တလဲလဲဖြစ်စေသော ကွင်းဆက်များဖြင့် တည်ဆောက်ထားသည်။ ၎င်းသည် ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းတစ်ခု၏ $theme-colorsမူကွဲများကို ဖန်တီးခြင်းနှင့် breakpoint တစ်ခုစီအတွက် တုံ့ပြန်မှုမျိုးကွဲများကို ဖန်တီးခြင်းအတွက် အထူးသဖြင့် အထောက်အကူဖြစ်သည်။ ဤ Sass မြေပုံများကို စိတ်ကြိုက်ပြင်ဆင်ပြီး ပြန်လည်ပေါင်းစည်းလိုက်သည်နှင့်အမျှ၊ ဤကွင်းဆက်များတွင် သင်၏ပြောင်းလဲမှုများကို အလိုအလျောက်မြင်ရမည်ဖြစ်ပါသည်။

ပြုပြင်မွမ်းမံမှုများ

Bootstrap ၏ အစိတ်အပိုင်းများစွာကို base-modifier class ချဉ်းကပ်မှုဖြင့် တည်ဆောက်ထားသည်။ ဆိုလိုသည်မှာ စတိုင်လ်ပုံစံ၏အစုအဝေးကို အခြေခံလူတန်းစား (ဥပမာ၊ ) တွင် စတိုင်ပုံစံကွဲလွဲမှုများကို မွမ်းမံမှုအတန်းများ (ဥပမာ၊ ) .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);
}

တုံ့ပြန်မှု

ဤ Sass ကွင်းများသည် အရောင်မြေပုံများအတွက်လည်း အကန့်အသတ်မရှိပါ။ သင်၏ အစိတ်အပိုင်းများ သို့မဟုတ် အသုံးအဆောင်ပစ္စည်းများ၏ တုံ့ပြန်မှုဆိုင်ရာ ပြောင်းလဲမှုများကိုလည်း ဖန်တီးနိုင်သည်။ ဥပမာအားဖြင့် ကျွန်ုပ်တို့၏တုံ့ပြန်မှုရှိသော စာသားချိန်ညှိမှု utilities များကို Sass မြေပုံ @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၊ သင်၏ပြောင်းလဲမှုများသည် ထိုမြေပုံပေါ်တွင် ထပ်လောင်းသည့် ကွင်းဆက်များအားလုံးကို သက်ရောက်မည်ဖြစ်သည်။

CSS ကိန်းရှင်များ

Bootstrap 4 တွင် ၎င်း၏စုစည်းထားသော CSS တွင် CSS စိတ်ကြိုက်ဂုဏ်သတ္တိများ (variables) နှစ်ဒါဇင်ခန့်ပါဝင်သည်။ ၎င်းတို့သည် သင့်ဘရောက်ဆာ၏ စစ်ဆေးရေးမှူး၊ ကုဒ်သဲပုံး သို့မဟုတ် ယေဘုယျပုံတူပုံတူရိုက်ခြင်းတွင် လုပ်ဆောင်သောအခါတွင် ကျွန်ုပ်တို့၏ ဆောင်ပုဒ်အရောင်များ၊ ခွဲမှတ်များနှင့် ပင်မဖောင့်အတွဲများကဲ့သို့ အသုံးများသော တန်ဖိုးများကို လွယ်ကူစွာ အသုံးပြုခွင့်ပေးပါသည်။

ရနိုင်သော ကိန်းရှင်များ

: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 variable များသည် Sass ၏ variable များနှင့် ဆင်တူသော ပြောင်းလွယ်ပြင်လွယ်ကို ပေးစွမ်းသော်လည်း browser တွင် အသုံးမပြုမီ compilation ပြုလုပ်ရန် မလိုအပ်ပါ။ ဥပမာအားဖြင့်၊ ဤနေရာတွင် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ စာမျက်နှာ၏ ဖောင့်နှင့် CSS variable များဖြင့် လင့်ခ်ပုံစံများကို ပြန်လည်သတ်မှတ်နေပါသည်။

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

သင့်မီဒီယာမေးမြန်းချက်များတွင် ကျွန်ုပ်တို့၏ breakpoint variable များကိုလည်း သင်အသုံးပြုနိုင်ပါသည်-

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}