ဆူး

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

ဤစာမျက်နှာတွင်

ကိန်းရှင်များ၊ မြေပုံများ၊ ရောနှောခြင်းနှင့် အခြားအရာများကို အခွင့်ကောင်းယူရန် ကျွန်ုပ်တို့၏ အရင်းအမြစ် 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

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

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

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

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

Bootstrap ၏ variable များစာရင်းအပြည့်အစုံကို 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

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

ကျွန်ုပ်တို့၏ starter ပရောဂျက်ဖြင့် npm မှတစ်ဆင့် Bootstrap ဖြင့် စတင်လိုက်ပါ။ သင်၏ကိုယ်ပိုင် npm ပရောဂျက်တွင် Bootstrap တည်ဆောက်ပုံနှင့် စိတ်ကြိုက်ပြင်ဆင်နည်းကိုကြည့်ရှုရန် twbs/bootstrap-npm-starter template သိုလှောင်ရာသို့ သွား ပါ ။ Sass compiler၊ Autoprefixer၊ Stylelint၊ PurgeCSS နှင့် Bootstrap အိုင်ကွန်များ ပါဝင်သည်။

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

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

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

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

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

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

နောက်ပိုင်းတွင်၊ ဤပြောင်းလဲမှုများကို Bootstrap ၏ $theme-colorsမြေပုံတွင်သတ်မှတ်ထားသည်-

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

မြေပုံသို့ထည့်ပါ။

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

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

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

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

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

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

အရောင်များ

ကျွန်ုပ်တို့ တွင်ရှိသော Sass မြေပုံများ ဘေးတွင် ၊ အပြင်အဆင်အရောင်များကို သီးခြားပြောင်းလဲနိုင်သောကိန်းရှင်များအဖြစ်လည်း အသုံးပြုနိုင်သည် $primary။

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

Bootstrap tint-color()နှင့် shade-color()လုပ်ဆောင်ချက်များဖြင့် သင်သည် အရောင်များကို အလင်း သို့မဟုတ် မှောင်စေနိုင်သည်။ lighten()ဤလုပ်ဆောင်ချက်များသည် Sass ၏ဇာတိ နှင့် မတူဘဲ အနက်ရောင် သို့မဟုတ် အဖြူနှင့် အရောင်များကို ရောနှော 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));
}

လက်တွေ့တွင်၊ သင်သည် function ကိုခေါ်ဆိုပြီး အရောင်နှင့် အလေးချိန်ဘောင်များကို ဖြတ်သွားမည်ဖြစ်သည်။

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

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

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

Web Content Accessibility Guidelines (WCAG) ဆန့်ကျင်ဘက်လိုအပ်ချက်များနှင့် ကိုက်ညီ စေရန် ၊ စာရေးသူ များသည် ခြွင်းချက်အနည်းငယ်ဖြင့် အနည်းဆုံး စာသားအရောင်ခြားနားမှု 4.5:1 နှင့် အနည်းဆုံး စာသားမဟုတ်သော အရောင်ခြားနားမှု 3:1 ကို ပေးဆောင်ရပါမည်။

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

SVG ကို ရှောင်ပါ။

ကျွန်ုပ်တို့သည် SVG နောက်ခံပုံများအတွက် စာလုံးများ နှင့် ဇာတ်ကောင် များကို escape-svgလွတ်မြောက်ရန် လုပ်ဆောင်ချက်ကို အသုံးပြုသည် ။ လုပ်ဆောင်ချက်ကို အသုံးပြုသည့်အခါ ဒေတာ URI များကို ကိုးကားရပါမည်။<>#escape-svg

ပေါင်းထည့်ခြင်းနှင့် နုတ်ခြင်းလုပ်ဆောင်ချက်များ

CSS လုပ်ဆောင်ချက်ကို ခြုံရန် ကျွန်ုပ်တို့သည် addနှင့် လုပ်ဆောင်ချက်များကို အသုံးပြုသည် ။ ဤလုပ်ဆောင်ချက်များ၏ အဓိကရည်ရွယ်ချက်မှာ “unitless” တန်ဖိုးကို ဖော်ပြချက် တစ်ခုသို့ ဖြတ်သန်း သည့်အခါ အမှားများကို ရှောင်ရှားရန်ဖြစ်သည်။ သင်္ချာနည်းအရ မှန်ကန်သော်လည်း ဘရောက်ဆာအားလုံးတွင် အမှားအယွင်း တစ်ခု ပြန်ဖြစ်သွားသည်။subtractcalc0calccalc(10px - 0)

calc မှန်ကန်သည့်နေရာတွင် ဥပမာ-

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

calc မမှန်ကန်သော ဥပမာ-

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

Mixins

ကျွန်ုပ်တို့၏ scss/mixins/လမ်းညွှန်တွင် Bootstrap ၏အစိတ်အပိုင်းများကိုပါဝါပေးသော mixin များစွာရှိပြီး သင့်ကိုယ်ပိုင်ပရောဂျက်တစ်လျှောက်တွင်လည်းအသုံးပြုနိုင်ပါသည်။

အရောင်အစီအစဥ်များ

မီဒီယာမေးမြန်းချက် အတွက် အတိုကောက် ရောစပ် ထားသော ၊ နှင့် စိတ်ကြိုက်အရောင် အစီအစဥ်များအတွက် prefers-color-schemeပံ့ပိုးမှုဖြင့် ရနိုင်ပါသည် ။lightdark

@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
  }
}