सीएसएस चर

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

bs-तीसरे पक्ष के सीएसएस के साथ टकराव से बचने के लिए हमारे सभी कस्टम गुणों के साथ उपसर्ग किया गया है।

मूल चर

यहां वे वेरिएबल्स हैं जिन्हें हम शामिल करते हैं (ध्यान दें कि :rootआवश्यक है) जिन्हें बूटस्ट्रैप के सीएसएस लोड होने पर कहीं भी एक्सेस किया जा सकता है। वे हमारी _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 वेरिएबल्स का उपयोग कैसे कर रहे हैं, इस बारे में कुछ जानकारी के लिए हमारे टेबल डॉक्यूमेंटेशन पर एक नज़र डालें । हमारे नावबार भी v5.2.0 के रूप में CSS चर का उपयोग करते हैं । हम अपने ग्रिड में सीएसएस वैरिएबल का भी उपयोग कर रहे हैं—मुख्य रूप से गटर के लिए नया ऑप्ट-इन सीएसएस ग्रिड —भविष्य में आने वाले अधिक घटक उपयोग के साथ।

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

उपसर्ग

आपके अपने कोडबेस के साथ टकराव से बचने के लिए अधिकांश 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 वेरिएबल मीडिया क्वेरी में काम नहीं करते हैं । यह चर के लिए सीएसएस युक्ति में डिज़ाइन द्वारा है, लेकिन आने वाले वर्षों में env()चर के समर्थन के साथ बदल सकता है। कुछ उपयोगी लिंक के लिए यह स्टैक ओवरफ़्लो उत्तर देखें । इस बीच, आप इन चरों का उपयोग अन्य CSS स्थितियों के साथ-साथ अपने JavaScript में भी कर सकते हैं।