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

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

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-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 कमी करू शकतो, नेस्टेड टेबल्स सारख्या ठिकाणी शैली वारशाने मिळत नाही याची खात्री करू शकतो आणि Sass संकलनानंतर बूटस्ट्रॅप घटकांना काही मूलभूत पुनर्रचना आणि विस्तारास अनुमती देऊ शकतो.

आम्ही CSS व्हेरिएबल्स कसे वापरत आहोत याच्या काही अंतर्दृष्टीसाठी आमचे टेबल दस्तऐवजीकरण पहा .

आम्ही आमच्या ग्रिडवर CSS व्हेरिएबल्स देखील वापरत आहोत—प्रामुख्याने गटरसाठी—भविष्यात अधिक घटक वापरासह.

उदाहरणे

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

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