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);
}