CSS व्हेरिएबल्स

बूटस्ट्रॅपमध्ये अनेक CSS सानुकूल गुणधर्म (व्हेरिएबल्स) त्याच्या संकलित CSS मध्ये रिअल-टाइम कस्टमायझेशनसाठी Sass पुन्हा कंपाइल न करता समाविष्ट आहेत. तुमच्या ब्राउझरच्या इंस्पेक्टरमध्ये, कोड सँडबॉक्समध्ये किंवा सामान्य प्रोटोटाइपिंगमध्ये काम करताना आमच्या थीमचे रंग, ब्रेकपॉइंट्स आणि प्राथमिक फॉन्ट स्टॅक यासारख्या सामान्यतः वापरल्या जाणार्‍या मूल्यांमध्ये हे सहज प्रवेश प्रदान करतात.

bs-तृतीय पक्ष CSS सह संघर्ष टाळण्यासाठी आमचे सर्व कस्टम गुणधर्म उपसर्ग आहेत .

रूट व्हेरिएबल्स

येथे आम्ही समाविष्ट केलेले व्हेरिएबल्स आहेत (लक्षात ठेवा की ते :rootआवश्यक आहे) ते बूटस्ट्रॅपचे CSS लोड केलेले कोठेही प्रवेश केले जाऊ शकतात. ते आमच्या _root.scssफाइलमध्ये स्थित आहेत आणि आमच्या संकलित केलेल्या डिस्ट फाइल्समध्ये समाविष्ट आहेत.

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

घटक चल

बूटस्ट्रॅप 5 विविध घटकांसाठी स्थानिक व्हेरिएबल्स म्हणून सानुकूल गुणधर्मांचा वापर वाढवत आहे. अशा प्रकारे आम्ही आमचे संकलित CSS कमी करतो, नेस्टेड टेबल्स सारख्या ठिकाणी शैली वारशाने मिळत नाही याची खात्री करतो आणि Sass संकलनानंतर बूटस्ट्रॅप घटकांना काही मूलभूत रीस्टाईल आणि विस्तारित करण्याची परवानगी देतो.

आम्ही CSS व्हेरिएबल्स कसे वापरत आहोत याच्या काही अंतर्दृष्टीसाठी आमचे टेबल दस्तऐवजीकरण पहा . आमचे navbars देखील v5.2.0 नुसार CSS व्हेरिएबल्स वापरतात. आम्ही आमच्या ग्रिडवर CSS व्हेरिएबल्स देखील वापरत आहोत—प्रामुख्याने गटरसाठी नवीन ऑप्ट-इन CSS ग्रिडसाठी —भविष्यात अधिक घटक वापरासह.

जेव्हा शक्य असेल तेव्हा, आम्ही बेस घटक स्तरावर CSS व्हेरिएबल्स नियुक्त करू (उदा. .navbarnavbar आणि त्याच्या उप-घटकांसाठी). हे कोठे आणि कसे सानुकूलित करायचे याचा अंदाज कमी करते आणि भविष्यातील अद्यतनांमध्ये आमच्या कार्यसंघाद्वारे सहज बदल करण्यास अनुमती देते.

उपसर्ग

तुमच्या स्वतःच्या कोडबेसशी टक्कर टाळण्यासाठी बहुतेक CSS व्हेरिएबल्स उपसर्ग वापरतात. हा उपसर्ग --प्रत्येक CSS व्हेरिएबलसाठी आवश्यक असलेल्या व्यतिरिक्त आहे.

$prefixSass व्हेरिएबलद्वारे उपसर्ग सानुकूलित करा . डीफॉल्टनुसार, ते सेट केले आहे bs-(मागोमाग डॅश लक्षात ठेवा).

उदाहरणे

CSS व्हेरिएबल्स Sass च्या व्हेरिएबल्स प्रमाणेच लवचिकता देतात, परंतु ब्राउझरला सर्व्ह करण्यापूर्वी संकलनाची आवश्यकता न ठेवता. उदाहरणार्थ, येथे आम्ही आमच्या पृष्ठाचा फॉन्ट आणि लिंक शैली CSS व्हेरिएबल्ससह रीसेट करत आहोत.

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

ग्रिड ब्रेकपॉइंट्स

आम्ही आमचे ग्रिड ब्रेकपॉइंट्स CSS व्हेरिएबल्स म्हणून समाविष्ट करत असताना (वगळता xs) CSS व्हेरिएबल्स मीडिया क्वेरीमध्ये काम करत नाहीत . हे व्हेरिएबल्ससाठी CSS स्पेसमध्ये डिझाइननुसार आहे, परंतु व्हेरिएबल्सच्या समर्थनासह येत्या काही वर्षांत बदलू शकते env(). काही उपयुक्त दुव्यांसाठी हे स्टॅक ओव्हरफ्लो उत्तर पहा . दरम्यान, तुम्ही इतर CSS परिस्थितींमध्ये तसेच तुमच्या JavaScript मध्ये हे व्हेरिएबल्स वापरू शकता.