CSS चर

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

अस्माकं सर्वे कस्टम् गुणाःbs- तृतीयपक्षस्य CSS इत्यनेन सह विग्रहं परिहरितुं इत्यनेन सह उपसर्गः भवति ।

मूल चर

अत्र वयं समाविष्टाः चराः सन्ति (ध्यायन्तु यत् the :rootआवश्यकम् अस्ति) ये कुत्रापि Bootstrap इत्यस्य CSS लोड् भवति तत्र अभिगन्तुं शक्यन्ते । ते अस्माकं सञ्चिकायां स्थिताः सन्ति _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-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));
}

घटक चर

वयं विविधघटकानाम् कृते स्थानीयचररूपेण custom properties इत्यस्य अपि उपयोगं कर्तुं आरभामः । एतेन प्रकारेण वयं अस्माकं संकलितं CSS न्यूनीकर्तुं शक्नुमः, नेस्टेड् टेबल् इत्यादिषु स्थानेषु शैल्याः उत्तराधिकारं न प्राप्नुवन्ति इति सुनिश्चितं कर्तुं शक्नुमः, तथा च Sass संकलनस्य अनन्तरं Bootstrap घटकानां किञ्चित् मूलभूतं पुनः शैलीं विस्तारं च अनुमन्यते

वयं CSS चरस्य उपयोगं कथं कुर्मः इति किञ्चित् अन्वेषणार्थं अस्माकं सारणीदस्तावेजीकरणं पश्यन्तु |

वयं अस्माकं जालपुटेषु CSS चरानाम् अपि उपयोगं कुर्मः-मुख्यतया गटर-कृते-भविष्ये अधिकघटक-उपयोगः आगमिष्यति ।

उदाहरणानि

CSS चराः Sass इत्यस्य चरानाम् समानं लचीलतां प्रदास्यन्ति, परन्तु ब्राउजर् प्रति सेवितुं पूर्वं संकलनस्य आवश्यकतां विना । यथा, अत्र वयं अस्माकं पृष्ठस्य font तथा ​​link styles CSS variables इत्यनेन पुनः सेट् कुर्मः ।

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