सीएसएस चर

बूटस्ट्रैप में 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-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 वेरिएबल्स का उपयोग कैसे कर रहे हैं, इस बारे में कुछ जानकारी के लिए हमारे टेबल डॉक्यूमेंटेशन पर एक नज़र डालें ।

हम अपने ग्रिड में सीएसएस वैरिएबल का भी उपयोग कर रहे हैं—मुख्य रूप से गटर के लिए—भविष्य में और अधिक घटक उपयोग के साथ।

उदाहरण

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

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

ग्रिड ब्रेकप्वाइंट

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