Source

थीमिंग बूटस्ट्रैप

आसान थीमिंग ते घटक बदलाव आस्तै वैश्विक शैली प्राथमिकताएं आस्तै साढ़े नमें बिल्ट-इन Sass चर कन्नै बूटस्ट्रैप 4 गी अनुकूलित करो.

परिचे

बूटस्ट्रैप 3 च, थीमिंग गी बड्डे पैमाने पर LESS च चर ओवरराइड, कस्टम CSS, ते इक बक्खरी थीम स्टाइलशीट कन्नै चलाया गेआ हा जेह् ड़ा असें अपनी distफाइलें च शामल कीता हा। कुछ मेहनत कन्नै, कोई कोर फाइलें गी छूए दे बगैर बूटस्ट्रैप 3 दे लुक गी पूरी चाल्ली कन्नै नमें सिरेआ डिजाइन करी सकदा हा। बूटस्ट्रैप 4 इक परिचित, पर थोड़ा बक्खरा दृष्टिकोण प्रदान करदा ऐ।

हुण, थीमिंग Sass चर, Sass नक्शे, ते कस्टम CSS द्वारा पूरा कीती जंदी ऐ। कोई होर समर्पित थीम स्टाइलशीट नेईं ऐ; इसदे बजाय, तुस ढाल, छाया, ते होर मते गी जोड़ने आस्तै बिल्ट-इन थीम गी सक्षम करी सकदे ओ.

सस्स

चर, नक्शे, मिक्सिन, ते होर मते दा फायदा लैने आस्तै साढ़ी स्रोत Sass फाइलें दा उपयोग करो। साढ़े बिल्ड च असें ब्राउज़र गोल करने कन्नै मुद्दें गी रोकने आस्तै Sass राउंडिंग परिशुद्धता गी 6 तगर बधाया ऐ (डिफ़ॉल्ट रूप कन्नै एह् 5 ऐ)।

फाइल दा ढांचा

जदूं बी होई सकै, बूटस्ट्रैप दी कोर फाइलें गी संशोधित करने थमां बचो. सस्स आस्तै, इसदा मतलब ऐ जे अपनी खुद दी स्टाइलशीट बनाओ जेह् ड़ी बूटस्ट्रैप गी आयात करदी ऐ तां जे तुस इसगी संशोधित ते विस्तार करी सकदे ओ. एह् मनदे होई जे तुस npm जनेह् पैकेज प्रबंधक दा इस्तेमाल करा करदे ओ, तुंदे कोल इक फाइल संरचना होग जेह् ड़ी इस चाल्ली दिक्खदी ऐ:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

जेकर तुसें साढ़ी स्रोत फाइलें गी डाउनलोड कीता ऐ ते पैकेज प्रबंधक दा इस्तेमाल नेईं करा करदे ओ तां तुस उस संरचना दे समान किश मैन्युअल रूप कन्नै सेटअप करना चांह् दे ओ, बूटस्ट्रैप दी स्रोत फाइलें गी अपने थमां बक्ख रक्खदे होई.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

आयात करना

अपने custom.scss, च तुस बूटस्ट्रैप दी स्रोत Sass फाइलें गी आयात करगेओ. तुंदे कोल दो विकल्प न: बूटस्ट्रैप दे सारे गी शामल करो, जां तुसेंगी लोड़चदे हिस्से चुनो. अस बाद आह् ली गी प्रोत्साहित करने आं , हालांकि इस गल्लै दा ध्यान रक्खो जे साढ़े घटकें च किश जरूरतें ते निर्भरताएं न । तुसेंगी साढ़े प्लगइन्स आस्तै किश जावास्क्रिप्ट बी शामल करने दी लोड़ होग।

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

उस सेटअप गी जगह च रखदे होई, तुस अपने custom.scss. // Optionalतुस जरूरत मताबक खंड दे हेठ बूटस्ट्रैप दे हिस्से गी बी जोड़ना शुरू करी सकदे ओ । bootstrap.scssअस सुझाऽ दिन्दे आं जे साढ़ी फाइल थमां पूरा आयात ढेर गी अपने शुरूआती बिंदु दे रूप च इस्तेमाल करो.

चर डिफ़ॉल्ट होंदे न

बूटस्ट्रैप 4 च हर Sass चर च !defaultफ्लैग शामल ऐ जेह् ड़ा तुसेंगी बूटस्ट्रैप दे स्रोत कोड गी संशोधित कीते बगैर अपने खुद दे Sass च चर दे डिफाल्ट वैल्यू गी ओवरराइड करने दी इजाजत दिंदा ऐ. जरूरत मताबक चर गी कापी ते पेस्ट करो, उंदे मूल्यें गी संशोधित करो, ते !defaultझंडा हटाओ. जेकर कोई चर पैह् ले थमां गै असाइन कीता गेदा ऐ , तां उसगी बूटस्ट्रैप च डिफाल्ट वैल्यूएं आसेआ दुबारा असाइन नेईं कीता जाग.

तुसें गी बूटस्ट्रैप दे चर दी पूरी सूची च मिलग scss/_variables.scss.

इक गै Sass फाइल दे अंदर चर ओवरराइड डिफाल्ट चर थमां पैह् ले जां बाद च आई सकदे न. लेकन, पूरे Sass फाइलें च ओवरराइड करदे बेल्लै, तुंदी ओवरराइडें गी बूटस्ट्रैप दी Sass फाइलें गी आयात करने शा पैह् ले औना लोड़चदा ऐ.

इत्थै इक उदाहरण ऐ जेह् ड़ा npm दे राहें बूटस्ट्रैप आयात ते संकलन करदे बेल्लै background-colorते colorआस्तै बदलदा ऐ:<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

बूटस्ट्रैप च कुसै बी चर आस्तै जरूरी मताबक दोहराओ, जिंदे च हेठ दित्ते गेदे वैश्विक विकल्प बी शामल न.

नक्शे ते लूप

बूटस्ट्रैप 4 च मुट्ठी भर Sass नक्शे, कुंजी मूल्य जोड़े शामल न जेह् ड़े सरबंधत CSS दे परिवारें गी पैदा करना सखल्ला बनांदे न। अस अपने रंगें, ग्रिड ब्रेकपॉइंटें, ते होर मते सारें लेई Sass नक्शे दा इस्तेमाल करदे आं। जि'यां Sass चर, सारे Sass नक्शे च !defaultझंडा शामल ऐ ते ओवरराइड ते विस्तार कीता जाई सकदा ऐ।

साढ़े किश सास नक्शे डिफ़ॉल्ट रूप कन्नै खाली च मर्ज कीते गेदे न। एह् कुसै दित्ते गेदे सस नक्शे गी आसानी कन्नै विस्तार करने दी अनुमति देने लेई कीता जंदा ऐ, पर एह्दे कन्नै नक्शे थमां आइटमें गी हटाने गी थोड़ा होर मुश्कल बनाने दी कीमत पर औंदा ऐ ।

नक्शा संशोधित करो

साढ़े $theme-colorsनक्शे च इक मौजूदा रंग गी संशोधित करने आस्तै, अपनी कस्टम Sass फाइल च निम्नलिखित जोड़ो:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

नक्शे पर जोड़ो

च इक नमां रंग $theme-colorsजोड़ने लेई, नमीं कुंजी ते मान जोड़ो:

$theme-colors: (
  "custom-color": #900
);

नक्शे से हटा दे

$theme-colors, जां कुसै होर नक्शे थमां रंगें गी हटाने लेई , इस्तेमाल करो map-remove. ध्यान रक्खो तुसें गी साढ़ी जरूरतें ते विकल्पें दे बीच इसगी सम्मिलित करना होग:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

जरूरी कुंजी

बूटस्ट्रैप Sass नक्शे दे अंदर किश विशिष्ट कुंजियें दी मौजूदगी गी मनदा ऐ जिऱयां अस इन्हें दा इस्तेमाल करदे आं ते अपने आपै गी विस्तार दिंदे आं। जि’यां-जि’यां तुस शामल नक्शे गी अनुकूलित करदे ओ, तुसेंगी त्रुट्टी दा सामना करना पौंदा ऐ जित्थै कुसै विशिष्ट Sass नक्शे दी कुंजी दा इस्तेमाल कीता जा करदा ऐ।

मसाल आस्तै, अस लिंक, बटन, ते फार्म स्टेटें आस्तै primary, success, ते dangerकुंजियें दा इस्तेमाल करदे आं। $theme-colorsइनें कुंजियें दे मूल्यें गी बदलने कन्नै कोई मुद्दा नेईं पेश करना चाहिदा, पर उनेंगी हटाने कन्नै Sass संकलन मुद्दे पैदा होई सकदे न. इनें दृष्टांतें च, तुसेंगी उनें मूल्यें दा इस्तेमाल करने आह् ले सस कोड गी संशोधित करने दी लोड़ होग.

फंक्शन करदा ऐ

बूटस्ट्रैप केईं Sass फंक्शनें दा उपयोग करदा ऐ , पर सामान्य थीमिंग आस्तै सिर्फ इक उप-समूह लागू ऐ । रंग नक्शे थमां मूल्य हासल करने आस्तै असें त्रै फंक्शन शामल कीते न:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

एह् तुसेंगी इक Sass नक्शे थमां इक रंग चुनने दी अनुमति दिंदे न जि'यां तुस v3 थमां इक रंग चर दा इस्तेमाल किस चाल्ली करगेओ.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

नक्शे थमां रंग दा इक खास स्तर हासल करने आस्तै साढ़े कोल इक होर फंक्शन बी ऐ। $theme-colorsनकारात्मक स्तर दे मूल्यें कन्नै रंग हल्का होग, जिसलै के उच्च स्तरें कन्नै काला होग।

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

व्यवहार च, तुस फंक्शन गी बुलाने ते दो पैरामीटर च पास करगेओ: रंग दा नांऽ $theme-colors(जियां, प्राथमिक जां खतरा) ते इक संख्यात्मक स्तर।

.custom-element {
  color: theme-color-level(primary, -10);
}

अतिरिक्त फ़ंक्शनें गी भविष्य च जोड़ेआ जाई सकदा ऐ जां अतिरिक्त सैस नक्शे आस्तै स्तर फ़ंक्शन बनाने आस्तै तुंदे अपने कस्टम सस्स, जां इत्थूं तगर जे इक जेनेरिक बी जेकर तुस होर वर्बोस होना चांह् दे ओ.

रंग विपरीत

इक अतिरिक्त फंक्शन जिसगी अस बूटस्ट्रैप च शामल करदे आं, ओह् ऐ रंग कंट्रास्ट फंक्शन, color-yiq. एह् निर्दिश्ट आधार रंग दे आधार उप्पर इक हल्के ( ) जां गहरे ( ) विपरीत रंग गी स्वतः वापस करने आस्तै YIQ रंग स्पेस दा उपयोग करदा ऐ. एह् फंक्शन खास करियै मिक्सिन जां लूप आस्तै उपयोगी ऐ जित्थै तुस मते सारे वर्गें गी पैदा करा करदे ओ.#fff#111

मसाल आस्तै, साढ़े $theme-colorsनक्शे थमां रंग नमूनें गी पैदा करने आस्तै:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

इसदा इस्तेमाल इक बारी दी कंट्रास्ट जरूरतें लेई बी कीता जाई सकदा ऐ:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

तुस साढ़े रंग नक्शा फंक्शनें कन्नै इक आधार रंग बी निर्दिश्ट करी सकदे ओ:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

सस्स विकल्प

साढ़ी बिल्ट-इन कस्टम चर फाइल कन्नै बूटस्ट्रैप 4 गी अनुकूलित करो ते नमें $enable-*Sass चर कन्नै वैश्विक CSS प्राथमिकताएं गी आसानी कन्नै टॉगल करो। इक चर दे मूल्य गी ओवरराइड करो ते npm run testजरूरत मताबक कन्नै दुबारा संकलित करो.

तुस बूटस्ट्रैप दी scss/_variables.scssफाइल च कुंजी वैश्विक विकल्पें आस्तै इनें चर गी ढूंढी सकदे ओ ते अनुकूलित करी सकदे ओ.

चर करने आला	मूल्यें दा	ब्यौरा
`$spacer`	`1rem`(डिफ़ॉल्ट), जां कोई बी मान > 0	साढ़ी स्पेसर उपयोगिताएं गी प्रोग्रामेटिक रूप कन्नै पैदा करने आस्तै डिफाल्ट स्पेसर मूल्य निर्दिश्ट करदा ऐ .
`$enable-rounded`	`true`(डिफ़ॉल्ट) या`false`	`border-radius`बक्ख-बक्ख घटकें पर पूर्व- निर्धारित शैलियें गी सक्षम बनांदा ऐ।
`$enable-shadows`	`true`या `false`(डिफ़ॉल्ट) ऐ।	`box-shadow`बक्ख-बक्ख घटकें पर पूर्व- निर्धारित शैलियें गी सक्षम बनांदा ऐ।
`$enable-gradients`	`true`या `false`(डिफ़ॉल्ट) ऐ।	`background-image`बक्ख-बक्ख घटकें पर शैलियें दे राहें पूर्व-निर्धारित ढाल गी सक्षम करदा ऐ।
`$enable-transitions`	`true`(डिफ़ॉल्ट) या`false`	`transition`बक्ख-बक्ख घटकें पर पूर्व- परिभाषित एस गी सक्षम करदा ऐ।
`$enable-prefers-reduced-motion-media-query`	`true`(डिफ़ॉल्ट) या`false`	`prefers-reduced-motion`मीडिया क्वेरी गी सक्षम करदा ऐ , जेह् ड़ी बरतूनी दे ब्राउज़र/ऑपरेटिंग सिस्टम प्राथमिकताएं दे आधार उप्पर किश एनीमेशनें/संक्रमणें गी दबांदी ऐ।
`$enable-hover-media-query`	`true`या `false`(डिफ़ॉल्ट) ऐ।	पदावनत कर दी
`$enable-grid-classes`	`true`(डिफ़ॉल्ट) या`false`	ग्रिड सिस्टम आस्तै CSS वर्गें दी जनरेशन गी सक्षम बनांदा ऐ (जियां, `.container`, `.row`, `.col-md-1`, बगैरा)।
`$enable-caret`	`true`(डिफ़ॉल्ट) या`false`	पर छद्म तत्व कैरेट गी सक्षम करदा ऐ `.dropdown-toggle`.
`$enable-print-styles`	`true`(डिफ़ॉल्ट) या`false`	छपाई गी अनुकूल बनाने लेई शैलियें गी सक्षम बनांदा ऐ।
`$enable-validation-icons`	`true`(डिफ़ॉल्ट) या`false`	`background-image`सत्यापन राज्यें लेई पाठ इनपुटें ते किश कस्टम फार्में दे अंदर आइकनें गी सक्षम करदा ऐ.

रंग

बूटस्ट्रैप दे बक्ख-बक्ख घटकें ते उपयोगिताएं च मते सारे इक सस्स नक्शे च परिभाशत रंगें दी श्रृंखला दे माध्यम कन्नै बनाया गेदा ऐ। इस नक्शे गी सस्स च लूप कीता जाई सकदा ऐ तां जे नियम सेट दी इक श्रृंखला जल्दी पैदा कीती जाई सकै।

सारे रंग

बूटस्ट्रैप 4 च उपलब्ध सारे रंग, Sass चर ते scss/_variables.scssफाइल च इक Sass मैप दे रूप च उपलब्ध न। इसगी बाद दे मामूली रिलीज च विस्तार कीता जाग तां जे अतिरिक्त शेड्स जोड़ेआ जाई सकै, जिऱयां ग्रेस्केल पैलेट जिसी अस पैह् ले थमां गै शामल करदे आं.

नीला

नील

काशनी

गलाबी

लाल

संत्तरा

पीला

सैल्ला

टील

सियान

इत्थें तुस अपने सस्स च इन्हें दा इस्तेमाल किस चाल्ली करी सकदे ओ:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

सेटिंगcolor ते background-color. _

भविक्ख च, अस हर रंग दे शेड्स आस्तै Sass नक्शे ते चर उपलब्ध करोआने दा लक्ष्य रखगे जि'यां अस हेठ दित्ते गेदे ग्रेस्केल रंगें कन्नै कीता ऐ।

थीम रंग

अस रंग योजनाएं गी पैदा करने आस्तै इक निक्के रंग पैलेट बनाने आस्तै सारे रंगें दा इक उप-समूह दा उपयोग करदे आं , जेह् ड़ा सैस चर दे रूप च बी उपलब्ध ऐ ते बूटस्ट्रैप्स दी scss/_variables.scssफाइल च इक सस मैप ऐ ।

मुंढला

माध्यमिक दा

कामयाबी

खतरा

चेतावनी

इन्फो

लो

न्हेरा

ग्रेज़ ने दी

ग्रे चरें दा इक विस्तृत सेट ते scss/_variables.scssअपने प्रोजेक्ट भर च ग्रे दे लगातार शेड्स आस्तै इक Sass मैप च। ध्यान रक्खो जे एह् "कूल ग्रे" न, जेह्ड़े तटस्थ ग्रे दी बजाय, सूक्ष्म नीले रंग दी ओर झुकदे न।

१०० ऐ

२०० ऐ

300 ऐ

४०० ऐ

५०० ऐ

६०० ऐ

७०० ऐ

८०० ऐ

900 ऐ

दे अंदर scss/_variables.scss, तुसें गी बूटस्ट्रैप दे रंग चर ते Sass नक्शा मिलग। $colorsसास नक्शे दा इक उदाहरण दित्ता गेदा ऐ:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

नक्शे दे अंदर मूल्यें गी जोड़ो, हटाओ जां संशोधित करो तां जे अपडेट कीता जाई सकै जे उंदा इस्तेमाल मते सारे होर घटकें च कीता जंदा ऐ। दुर्भाग्यवश इस समें, हर घटक इस सस नक्शे दा उपयोग नेईं करदा ऐ। भविष्य च अपडेट इस पर सुधार करने दी कोशश करग। तदूं तकर, ${color}चर ते इस सस मैप दा इस्तेमाल करने दी योजना बनाओ।

घटक ऐ

बूटस्ट्रैप दे मते सारे घटक ते उपयोगिताएं गी @eachलूप कन्नै बनाया गेदा ऐ जेह् ड़ा इक सस मैप उप्पर पुनरावृत्ति करदा ऐ। एह् खास करियै साढ़े आसेआ इक घटक दे $theme-colorsवेरिएंट पैदा करने ते हर ब्रेकपॉइंट आस्तै प्रतिक्रियाशील वेरिएंट बनाने लेई मददगार ऐ । जि’यां-जि’यां तुस इनें Sass नक्शे गी अनुकूलित करदे ओ ते दुबारा संकलित करदे ओ, तुस अपने आप गै अपने बदलावें गी इनें लूपें च परिलक्षित दिक्खगे।

संशोधक करने वाले

बूटस्ट्रैप दे मते सारे घटक बेस-मोडिफायर क्लास दृष्टिकोण कन्नै बने दे न। इसदा मतलब ऐ जे स्टाइलिंग दा बड्डा हिस्सा इक आधार वर्ग (जियां, .btn) च शामल ऐ जिसलै के शैली च बदलाव संशोधक वर्गें (जियां, .btn-danger) च सीमित ऐ । एह् संशोधक वर्गें गी $theme-colorsनक्शे थमां बनाई गेदी ऐ तां जे साढ़े संशोधक वर्गें दी संख्या ते नांऽ गी अनुकूलित कीता जाई सकै।

घटक ते अपनी सारी बैकग्राउंड यूटिलिटीएं $theme-colorsगी संशोधक पैदा करने आस्तै अस किस चाल्ली नक्शे उप्पर लूप करदे आं इसदे दो उदाहरण दित्ते गेदे न ।.alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

जवाबदेही

एह् सस लूप रंग नक्शे तगर सीमित नेईं न, एह् बी। तुस अपने घटकें जां उपयोगिताएं दे प्रतिक्रियाशील बदलाव बी पैदा करी सकदे ओ। उदाहरण दे तौर पर साढ़ी प्रतिक्रियाशील पाठ संरेखण उपयोगिताएं गी लैओ जित्थै अस इक मीडिया क्वेरी शामल कन्नै सास मैप @eachआस्तै इक लूप गी मिक्स करदे आं।$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

क्या तुसेंगी अपने , संशोधित करने दी लोड़ होग $grid-breakpoints, तुंदे बदलाव उस नक्शे उप्पर पुनरावृत्ति करने आह् ले सब्भै लूपें पर लागू होङन.

सीएसएस चर ऐ

बूटस्ट्रैप 4 च अपने संकलित CSS च लगभग दो दर्जन CSS कस्टम गुण (चर) शामल न। एह् तुंदे ब्राउज़र दे इंस्पेक्टर, इक कोड सैंडबॉक्स, जां सामान्य प्रोटोटाइपिंग च कम्म करदे बेल्लै साढ़े थीम रंग, ब्रेकपॉइंट, ते प्राथमिक फॉन्ट स्टैक जनेह् आमतौर पर इस्तेमाल कीते जाने आह् ले मूल्यें तगर सखलाई प्रदान करदे न।

उपलब्ध चर ऐ

इत्थें अस शामल चर न (ध्यान देओ जे दी :rootलोड़ ऐ)। ओह् साढ़ी _root.scssफाइल च स्थित न।

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

उदाहरण दे

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

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

ब्रेकपॉइंट चर

जदके अस मूल रूप कन्नै अपने CSS चर च ब्रेकपॉइंट शामल कीते हे (जियां, --breakpoint-md), एह् मीडिया क्वेरी च समर्थत नेईं ऐ , पर एह् अजें बी मीडिया क्वेरी च नियम सेट दे अंदर इस्तेमाल कीता जाई सकदा ऐ. एह् ब्रेकपॉइंट चर पिछले संगतता आस्तै संकलित सीएसएस च रौंह् दे न कीजे एह् जावास्क्रिप्ट आसेआ बरतेआ जाई सकदा ऐ। स्पेक्स च होर जानने लेई .

जेह् ड़ा समर्थत नेईं ऐ इसदा इक उदाहरण इत्थै दित्ता गेदा ऐ:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

ते इत्थें इक उदाहरण ऐ जेह्ड़ा समर्थन कीता गेदा ऐ:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}