CSS o'zgaruvchilari

Bootstrap Sass-ni qayta kompilyatsiya qilmasdan real vaqtda sozlash uchun kompilyatsiya qilingan CSS-da ko'plab CSS maxsus xususiyatlarini (o'zgaruvchilari) o'z ichiga oladi. Bular brauzeringiz inspektori, kod sinov muhiti yoki umumiy prototiplashda ishlaganda mavzu ranglari, to‘xtash nuqtalari va asosiy shrift steklari kabi tez-tez ishlatiladigan qiymatlarga oson kirish imkonini beradi.

Bizning barcha shaxsiy xususiyatlarimizbs- uchinchi tomon CSS bilan ziddiyatlarni oldini olish uchun prefiks bilan joylashtirilgan.

Ildiz o'zgaruvchilari

:rootBu erda biz Bootstrap CSS yuklangan istalgan joyda kirish mumkin bo'lgan o'zgaruvchilar (kerak ekanligini unutmang ). Ular bizning faylimizda joylashgan _root.scssva bizning kompilyatsiya qilingan dist fayllarimizga kiritilgan.

: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;
}

Komponent o'zgaruvchilari

Bootstrap 5 turli komponentlar uchun mahalliy o'zgaruvchilar sifatida maxsus xususiyatlardan tobora ko'proq foydalanmoqda. Shunday qilib, biz kompilyatsiya qilingan CSS-ni qisqartiramiz, uslublar ichki o'rnatilgan jadvallar kabi joylarda meros bo'lib qolmasligini ta'minlaymiz va Sass kompilyatsiyasidan keyin Bootstrap komponentlarini asosiy qayta tiklash va kengaytirishga ruxsat beramiz.

CSS o'zgaruvchilardan qanday foydalanayotganimizni tushunish uchun jadval hujjatlarini ko'rib chiqing . Navbarlarimiz v5.2.0 dan boshlab CSS o'zgaruvchilardan ham foydalanadi . Biz, shuningdek, CSS o'zgaruvchilardan tarmoqlarimiz bo'ylab foydalanmoqdamiz - birinchi navbatda yangi qo'shiladigan CSS tarmog'i uchun - kelajakda komponentlardan foydalanish ko'proq bo'ladi.

Iloji bo'lsa, biz CSS o'zgaruvchilarini asosiy komponent darajasida tayinlaymiz (masalan, .navbarnavbar va uning pastki komponentlari uchun). Bu qayerda va qanday sozlashni taxmin qilishni kamaytiradi va kelgusi yangilanishlarda jamoamiz tomonidan oson o'zgartirishlar kiritish imkonini beradi.

Prefiks

Ko'pgina CSS o'zgaruvchilari o'z kod bazasi bilan to'qnashuvlarning oldini olish uchun prefiksdan foydalanadilar. Ushbu prefiks --har bir CSS o'zgaruvchisida talab qilinadigan prefiksga qo'shimcha hisoblanadi.

$prefixSass o'zgaruvchisi orqali prefiksni sozlang. Odatiy bo'lib, u o'rnatilgan bs-(oxirgi chiziqqa e'tibor bering).

Misollar

CSS o'zgaruvchilari Sass o'zgaruvchilariga o'xshash moslashuvchanlikni taklif qiladi, ammo brauzerga taqdim etilishidan oldin kompilyatsiya qilish kerak emas. Masalan, biz sahifamizning shriftini va CSS o'zgaruvchilari bilan bog'lanish uslublarini qayta o'rnatmoqdamiz.

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

Gridning uzilish nuqtalari

Biz tarmoqning uzilish nuqtalarini CSS o'zgaruvchilari sifatida kiritgan bo'lsak ham ( dan tashqari ), CSS o'zgaruvchilari media so'rovlarida ishlamasliginixs yodda tuting . Bu o'zgaruvchilar uchun CSS spetsifikatsiyasi dizayni bo'yicha, lekin kelgusi yillarda o'zgaruvchilarni qo'llab-quvvatlash bilan o'zgarishi mumkin. Ba'zi foydali havolalar uchun ushbu Stack Overflow javobini tekshiring . Shu bilan birga, siz ushbu o'zgaruvchilardan boshqa CSS holatlarida, shuningdek JavaScript-da foydalanishingiz mumkin.env()