सीएसएस चर

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

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-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --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));
}

घटक चर

हम विभिन्न घटकों के लिए स्थानीय चर के रूप में कस्टम गुणों का उपयोग करना भी शुरू कर रहे हैं। इस तरह हम अपने संकलित सीएसएस को कम कर सकते हैं, यह सुनिश्चित कर सकते हैं कि शैलियों को नेस्टेड टेबल जैसी जगहों पर विरासत में नहीं मिला है, और कुछ बुनियादी रेस्टलिंग और सास संकलन के बाद बूटस्ट्रैप घटकों के विस्तार की अनुमति दें।

हम CSS वेरिएबल्स का उपयोग कैसे कर रहे हैं, इस बारे में कुछ जानकारी के लिए हमारे टेबल डॉक्यूमेंटेशन पर एक नज़र डालें ।

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

उदाहरण

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

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