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-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", Arial, "Noto Sans", "Liberation Sans", 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;
}

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

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

ကျွန်ုပ်တို့သည် CSS variables များကို မည်သို့အသုံးပြုနေပုံကို ထိုးထွင်းသိမြင်နိုင် စေရန်အတွက် ကျွန်ုပ်တို့၏ဇယားစာရွက်စာတမ်းများကို ကြည့်ရှု ပါ ။

ကျွန်ုပ်တို့သည် အနာဂတ်တွင် အစိတ်အပိုင်းအသုံးပြုမှု ပိုများလာသဖြင့် ကျွန်ုပ်တို့၏ ဂရစ်ဒ်များ—အဓိကအားဖြင့် ရေမြောင်းများအတွက် CSS variable များကိုလည်း အသုံးပြုနေပါသည်။

ဥပမာများ

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 တွင် ဒီဇိုင်းအားဖြင့်ဖြစ်သော်လည်း၊ variables များအတွက် ပံ့ပိုးမှုဖြင့် လာမည့်နှစ်များတွင် ပြောင်းလဲနိုင်ပါသည် ။ အထောက်အကူဖြစ်စေမည့် လင့်ခ်အချို့အတွက် ဤ Stack Overflow အဖြေ ကို ကြည့်ပါ ။ တစ်ချိန်တည်းတွင်၊ သင်သည် အခြား CSS အခြေအနေများအပြင် သင့် JavaScript တွင်လည်း ဤကိန်းရှင်များကို အသုံးပြုနိုင်ပါသည်။env()