सीएसएस चर के बारे में बतावल गइल बा

बूटस्ट्रैप अपना संकलित CSS में कई गो CSS कस्टम प्रॉपर्टी (वेरिएबल) सभ के सामिल करे ला जे रियल-टाइम कस्टमाइजेशन खातिर बिना सास के रिकंपाइल करे के जरूरत के पड़े ला। ई सभ आमतौर पर इस्तेमाल होखे वाला मान सभ जइसे कि हमनी के थीम रंग, ब्रेकपॉइंट, आ प्राथमिक फॉन्ट स्टैक सभ के आसानी से पहुँच प्रदान करे लें जब आपके ब्राउजर के इंस्पेक्टर, कोड सैंडबॉक्स, या सामान्य प्रोटोटाइपिंग में काम करे लें।

हमनी के सभ कस्टम गुण के उपसर्ग के साथbs- दिहल गइल बा ताकि थर्ड पार्टी सीएसएस के साथ टकराव से बचावल जा सके।

जड़ चर के बारे में बतावल गइल बा

इहाँ हमनी के शामिल चर बा (ध्यान दीं कि :rootजरूरी बा) जवना के कहीं भी बूटस्ट्रैप के सीएसएस लोड होखे तक पहुँचल जा सकेला। ई हमनी के फाइल में स्थित बा _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 के कम कर सकेनी जा, सुनिश्चित कर सकेनी जा कि नेस्टेड टेबल नियर जगहन पर स्टाइल विरासत में ना मिले, आ Sass संकलन के बाद बूटस्ट्रैप घटक सभ के कुछ बेसिक रिस्टाइलिंग आ एक्सटेंडिंग के अनुमति दे सके लीं।

हमनी के टेबल डॉक्यूमेंटेशन पर एक बार देखल जाव कुछ अंतर्दृष्टि खातिर कि हमनी के CSS चर के उपयोग कईसे कर रहल बानी जा .

हमनी के अपना ग्रिड सभ में CSS चर सभ के भी इस्तेमाल कर रहल बानी जा-मुख्य रूप से गटर सभ खातिर-जवना में भविष्य में अउरी घटक के इस्तेमाल आवे वाला बा।

उदाहरण खातिर दिहल गइल बा

CSS चर सभ में Sass के चर सभ नियर लचीलापन मिले ला, बाकी ब्राउजर के परोसल जाए से पहिले संकलन के जरूरत ना पड़े ला। उदाहरण खातिर, इहाँ हमनी के अपना पन्ना के फॉन्ट आ लिंक स्टाइल के CSS चर के साथ रीसेट कर रहल बानी जा।

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

ग्रिड के ब्रेकपॉइंट के बारे में बतावल गइल बा

जबकि हमनी के आपन ग्रिड ब्रेकपॉइंट के CSS चर के रूप में शामिल करेनी जा (S के छोड़ के xs), ध्यान राखीं कि CSS चर मीडिया क्वेरी में काम ना करेला । ई चर सभ खातिर CSS स्पेसिफिकेशन में डिजाइन के अनुसार बा, बाकी चर सभ खातिर सपोर्ट के साथ आवे वाला साल सभ में बदलाव हो सके env()ला। कुछ सहायक लिंक खातिर ई स्टैक ओवरफ्लो जवाब देखीं । एह बीच, रउआँ एह चर सभ के इस्तेमाल अन्य सीएसएस स्थिति सभ में भी क सकत बानी, साथ ही साथ अपना जावास्क्रिप्ट में भी।