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

Komponent o'zgaruvchilari

Shuningdek, biz turli komponentlar uchun mahalliy o‘zgaruvchilar sifatida maxsus xususiyatlardan foydalanishni boshlayapmiz. Shunday qilib, biz kompilyatsiya qilingan CSS-ni qisqartirishimiz mumkin, uslublar ichki o'rnatilgan jadvallar kabi joylarda meros bo'lib qolmasligini ta'minlashimiz va Sass kompilyatsiyasidan keyin Bootstrap komponentlarini asosiy qayta tiklash va kengaytirishga ruxsat berishimiz mumkin.

CSS o'zgaruvchilardan qanday foydalanayotganimizni tushunish uchun jadval hujjatlarini ko'rib chiqing .

Biz, shuningdek, CSS o'zgaruvchilari tarmoqlarimiz bo'ylab, birinchi navbatda, oluklar uchun, kelajakda ko'proq komponentlardan foydalanish uchun foydalanmoqdamiz.

Misollar

CSS o'zgaruvchilari Sass o'zgaruvchilariga o'xshash moslashuvchanlikni taklif qiladi, ammo brauzerga taqdim etilishidan oldin kompilyatsiya qilish kerak emas. Misol uchun, bu erda 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 . Bu vaqt ichida siz ushbu o'zgaruvchilardan boshqa CSS holatlarida, shuningdek JavaScript-da foydalanishingiz mumkin.env()