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

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

bs-ပြင်ပအဖွဲ့အစည်း CSS နှင့် ကွဲလွဲမှုများကို ရှောင်ရှားရန် ကျွန်ုပ်တို့၏ စိတ်ကြိုက်ဂုဏ်သတ္တိများအားလုံးကို ရှေ့ဆက်ထားသည် ။

Root အပြောင်းအလဲများ

:rootဤသည်မှာ Bootstrap ၏ CSS ကို တင်ထားသည့် မည်သည့်နေရာတွင်မဆို ဝင်ရောက်ကြည့်ရှုနိုင်သည့် (လိုအပ်ကြောင်း သတိပြုပါ) တွင် ကျွန်ုပ်တို့ပါဝင်သည့် variable များ ဖြစ်သည်။ ၎င်းတို့သည် _root.scssကျွန်ုပ်တို့၏ဖိုင်တွင်ရှိပြီး ကျွန်ုပ်တို့၏စုစည်းထားသော dist ဖိုင်များတွင် ပါဝင်သည်။

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

အစိတ်အပိုင်း ကိန်းရှင်များ

Bootstrap 5 သည် အစိတ်အပိုင်းအမျိုးမျိုးအတွက် စိတ်ကြိုက်ဂုဏ်သတ္တိများကို ဒေသဆိုင်ရာ ကိန်းရှင်များအဖြစ် ပိုမိုအသုံးပြုလာပါသည်။ ဤနည်းဖြင့် ကျွန်ုပ်တို့၏စုစည်းထားသော CSS ကို လျှော့ချကာ၊ nested tables ကဲ့သို့သော နေရာများတွင် စတိုင်များကို အမွေဆက်ခံခြင်းမရှိကြောင်း သေချာစေရန်နှင့် Sass ပေါင်းစပ်ပြီးနောက် Bootstrap အစိတ်အပိုင်းအချို့ကို ချဲ့ထွင်ခြင်းအား ခွင့်ပြုပါသည်။

ကျွန်ုပ်တို့သည် CSS variables များကို မည်သို့အသုံးပြုနေပုံကို ထိုးထွင်းသိမြင်နိုင် စေရန်အတွက် ကျွန်ုပ်တို့၏ဇယားစာရွက်စာတမ်းများကို ကြည့်ရှု ပါ ။ ကျွန်ုပ်တို့၏ navbar များသည် v5.2.0 ၏ CSS variable များကိုလည်း အသုံးပြု ပါသည်။ ကျွန်ုပ်တို့သည် အနာဂတ်တွင် အစိတ်အပိုင်းအသုံးပြုမှု ပိုမိုများပြားလာ သဖြင့် ရွေးချယ်မှုအသစ်အတွက် CSS ဇယား ကွက်များကို အဓိကအားဖြင့် ကျွန်ုပ်တို့၏ဂရစ်များတစ်လျှောက် CSS variable များကိုလည်း အသုံးပြု နေပါသည်။

ဖြစ်နိုင်သည့်အခါတိုင်း၊ ကျွန်ုပ်တို့သည် အခြေခံ အစိတ်အပိုင်းအဆင့်တွင် CSS ကိန်းရှင်များကို သတ်မှတ်ပေးမည် (ဥပမာ၊ .navbarnavbar နှင့် ၎င်း၏ အစိတ်အပိုင်းခွဲများအတွက်)။ ၎င်းသည် မည်သည့်နေရာနှင့် စိတ်ကြိုက်ပြင်ဆင်ရမည်ကို ခန့်မှန်းခြင်းကို လျော့နည်းစေပြီး ကျွန်ုပ်တို့၏အဖွဲ့သည် အနာဂတ်မွမ်းမံမှုများတွင် အလွယ်တကူ ပြုပြင်ပြောင်းလဲမှုများ ပြုလုပ်နိုင်စေပါသည်။

ရှေ့ဆက်

CSS variable အများစုသည် သင့်ကိုယ်ပိုင် codebase နှင့် တိုက်မိခြင်းကို ရှောင်ရှားရန် ရှေ့ဆက်ကို အသုံးပြုသည်။ ဤရှေ့ဆက်သည် --CSS variable တိုင်းတွင် လိုအပ်သည့်အရာများအပြင်၊

$prefixSass variable မှတစ်ဆင့် ရှေ့ဆက်ကို စိတ်ကြိုက် ပြင်ဆင်ပါ။ မူရင်းအားဖြင့်၊ ၎င်းသည် bs-(နောက်မှလိုက်နေသော ဒက်ရှ်ကို သတိပြုပါ) ဟု သတ်မှတ်ထားသည်။

ဥပမာများ

CSS variable များသည် Sass ၏ variables များနှင့် ဆင်တူသော ပျော့ပြောင်းမှုကို ပေးစွမ်းနိုင်သော်လည်း browser တွင် အသုံးမပြုမီ compilation ပြုလုပ်ရန် မလိုအပ်ပါ။ ဥပမာအားဖြင့်၊ ဤနေရာတွင် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ စာမျက်နှာ၏ ဖောင့်နှင့် CSS variable များဖြင့် လင့်ခ်ပုံစံများကို ပြန်လည်သတ်မှတ်နေပါသည်။

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

ဇယားကွက်များ

ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ grid breakpoints များကို CSS variables (မှလွဲ၍ ) အဖြစ်ထည့်သွင်းစဉ်တွင် CSS variable များသည် media queries များတွင် အလုပ်မလုပ်xs ကြောင်းသတိပြုပါ ။ ဤသည်မှာ variables များအတွက် CSS spec တွင် ဒီဇိုင်းအားဖြင့် ဖြစ်သော်လည်း၊ variable များအတွက် ပံ့ပိုးမှုဖြင့် လာမည့်နှစ်များတွင် ပြောင်းလဲနိုင်ပါသည် ။ အထောက်အကူဖြစ်စေသောလင့်ခ်အချို့အတွက် ဤ Stack Overflow အဖြေ ကို စစ် ကြည့်ပါ ။ ဤအတောအတွင်း၊ သင်သည် အခြား CSS အခြေအနေများအပြင် သင့် JavaScript တွင်လည်း ဤကိန်းရှင်များကို အသုံးပြုနိုင်ပါသည်။env()