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

सुलभथीमिंग् तथा घटकपरिवर्तनार्थं वैश्विकशैलीप्राथमिकतानां कृते अस्माकं नूतननिर्मितसास्सचरैः सह Bootstrap 4 अनुकूलितं कुर्वन्तु।

आमुख

Bootstrap 3 इत्यस्मिन्, theming बहुधा LESS इत्यस्मिन् variable overrides, custom CSS, तथा च पृथक् theme stylesheet इत्यनेन चालितम् आसीत् यत् वयं अस्माकं distसञ्चिकासु समाविष्टवन्तः । किञ्चित् प्रयत्नेन कोऽपि कोर-सञ्चिकाः न स्पृशन् Bootstrap 3 इत्यस्य रूपं पूर्णतया पुनः परिकल्पयितुं शक्नोति स्म । बूटस्ट्रैप् ४ परिचितं, परन्तु किञ्चित् भिन्नं दृष्टिकोणं प्रदाति ।

अधुना, Theming Sass variables, Sass maps, custom CSS इत्यनेन च सम्पाद्यते । तत्र अधिकं समर्पितं विषयशैलीपत्रकं नास्ति; तस्य स्थाने, भवन्तः अन्तःनिर्मितं विषयं ग्रेडिएण्ट्, छाया, इत्यादीनि योजयितुं सक्षमं कर्तुं शक्नुवन्ति ।

सस्स

चर, नक्शा, मिक्सिन्, इत्यादीनां लाभं ग्रहीतुं अस्माकं स्रोत Sass सञ्चिकानां उपयोगं कुर्वन्तु ।

सञ्चिका संरचना

यदा यदा सम्भवं तदा Bootstrap इत्यस्य मूलसञ्चिकानां परिवर्तनं परिहरन्तु । Sass कृते, तस्य अर्थः अस्ति यत् Bootstrap इत्यस्य आयातं कृत्वा स्वस्य stylesheet रचयतु येन भवान् तत् परिवर्तयितुं विस्तारयितुं च शक्नोति । भवान् npm इव संकुलप्रबन्धकं उपयुङ्क्ते इति कल्पयित्वा, भवतां समीपे एतादृशी सञ्चिकासंरचना भविष्यति ।

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

यदि भवान् अस्माकं स्रोतसञ्चिकाः अवतरितवान् अस्ति तथा च संकुलप्रबन्धकस्य उपयोगं न करोति तर्हि भवान् तस्याः संरचनायाः सदृशं किमपि मैन्युअल् रूपेण सेटअप कर्तुम् इच्छति, Bootstrap इत्यस्य स्रोतसञ्चिकाः स्वस्य सञ्चिकाभ्यः पृथक् स्थापयित्वा

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

आयात करते हुए

भवतः custom.scss, भवन्तः Bootstrap इत्यस्य स्रोतः Sass सञ्चिकाः आयातयिष्यन्ति । भवतः समीपे द्वौ विकल्पौ स्तः: Bootstrap इत्यस्य सर्वाणि समाविष्टानि, अथवा भवतः आवश्यकानि भागानि चिन्वन्तु । वयं उत्तरं प्रोत्साहयामः, यद्यपि अवगताः भवन्तु यत् अस्माकं घटकेषु काश्चन आवश्यकताः आश्रयाः च सन्ति । अस्माकं प्लगिन्स् कृते भवद्भिः अपि किञ्चित् जावास्क्रिप्ट् समाविष्टं कर्तव्यं भविष्यति ।

// 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 इत्यस्य भागान् योजयितुं अपि आरभुं शक्नुवन्ति । अस्माकं bootstrap.scssसञ्चिकातः पूर्णं import stack इत्यस्य उपयोगं भवतः आरम्भबिन्दुरूपेण कर्तुं वयं सुचयामः ।

चर पूर्वनिर्धारित

Bootstrap 4 इत्यस्मिन् प्रत्येकं Sass चरं !defaultध्वजं समावेशयति यत् भवन्तं Bootstrap इत्यस्य स्रोतसङ्केतं परिवर्तयित्वा स्वस्य Sass मध्ये चरस्य पूर्वनिर्धारितमूल्यं अधिलिखितुं शक्नोति आवश्यकतानुसारं चरानाम् प्रतिलिपिं कृत्वा चिनोतु, तेषां मूल्यानि परिवर्तयन्तु, !defaultध्वजं च निष्कासयन्तु । यदि कश्चन चरः पूर्वमेव नियुक्तः अस्ति, तर्हि Bootstrap मध्ये पूर्वनिर्धारितमूल्यैः पुनः नियुक्तः न भविष्यति ।

Bootstrap इत्यस्य चरानाम् सम्पूर्णसूचीं भवन्तः scss/_variables.scss.

एकस्मिन् एव Sass सञ्चिकायाः अन्तः चर-अभिलेखाः पूर्वनिर्धारित-चरानाम् पूर्वं वा पश्चात् वा आगन्तुं शक्नुवन्ति । तथापि, Sass सञ्चिकासु ओवरराइड् करणसमये, Bootstrap इत्यस्य Sass सञ्चिकानां आयातात् पूर्वं भवतः ओवरराइड् अवश्यमेव आगन्तुं भवति ।

अत्र एकं उदाहरणं यत् npm मार्गेण Bootstrap आयातं संकलनं च कुर्वन् background-colorand colorfor the परिवर्तयति:<body>

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

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

Bootstrap इत्यस्मिन् कस्यापि चरस्य कृते यथा आवश्यकं पुनरावृत्तिं कुर्वन्तु, यत्र अधः वैश्विकविकल्पाः सन्ति ।

मानचित्र एवं पाश

Bootstrap 4 इत्यस्मिन् Sass मानचित्रस्य मुष्टिभ्यां, कुञ्जीमूल्ययुग्मानि सन्ति ये सम्बन्धित-CSS-परिवारानाम् उत्पन्नं सुलभं कुर्वन्ति । वयं अस्माकं वर्णानाम्, ग्रिड् ब्रेकपॉइण्ट्, इत्यादीनां कृते Sass maps इत्यस्य उपयोगं कुर्मः । Sass चर इव सर्वेषु Sass मानचित्रेषु !defaultध्वजः समाविष्टः भवति तथा च अधिलिखितुं विस्तारयितुं च शक्यते ।

अस्माकं केचन Sass maps पूर्वनिर्धारितरूपेण रिक्तेषु विलीनाः भवन्ति । एतत् दत्तस्य Sass मानचित्रस्य सुलभविस्तारस्य अनुमतिं दातुं क्रियते, परन्तु मानचित्रात् वस्तूनि निष्कासयितुं किञ्चित् कठिनं कर्तुं व्ययेन आगच्छति

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

अस्माकं मानचित्रे विद्यमानं वर्णं परिवर्तयितुं $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";
...

आवश्यक कुञ्जी

Bootstrap Sass maps अन्तः केषाञ्चन विशिष्टानां कीलानां उपस्थितिं गृह्णाति यथा वयं स्वयमेव एतान् उपयुज्य विस्तारयामः । यथा भवन्तः समाविष्टानि मानचित्राणि अनुकूलयन्ति तथा तथा भवन्तः त्रुटयः सम्मुखीकुर्वन्ति यत्र विशिष्टस्य Sass मानचित्रस्य कुञ्जी उपयुज्यते ।

यथा, वयं लिङ्क्, बटन्, फार्म स्टेट्स् इत्येतयोः कृते primary, success, तथा च dangerकीलानि उपयुञ्ज्महे । $theme-colorsएतेषां कीलानां मूल्यानि प्रतिस्थापयित्वा कोऽपि समस्या न प्रस्तुतव्यः, परन्तु तान् निष्कास्य Sass संकलनसमस्याः उत्पद्यन्ते । एतेषु दृष्टान्तेषु, भवद्भिः तानि मूल्यानि उपयुज्यमानं 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);
}

अतिरिक्तकार्यं भविष्ये योजितुं शक्यते अथवा अतिरिक्त Sass मानचित्रस्य कृते स्तरकार्यं निर्मातुं स्वस्य कस्टम् Sass योजितुं शक्यते, अथवा सामान्यं अपि यदि भवान् अधिकं वर्बोस् भवितुम् इच्छति।

वर्ण विपरीतता

एकं अतिरिक्तं कार्यं वयं Bootstrap मध्ये समाविष्टं कुर्मः color contrast function, color-yiq. इदं निर्दिष्टस्य आधारवर्णस्य आधारेण स्वयमेव प्रकाशं ( ) अथवा गहरे ( ) विपरीतवर्णं प्रत्यागन्तुं YIQ वर्णस्थानस्य उपयोगं करोति । इदं कार्यं विशेषतया mixins अथवा loops कृते उपयोगी भवति यत्र भवान् बहुवर्गान् जनयति ।#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`
}

अस्माकं color map functions इत्यनेन अपि भवान् आधारवर्णं निर्दिष्टुं शक्नोति:

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

सस्स विकल्पाः

$enable-*अस्माकं निर्मित-अनुकूल-चर-सञ्चिकायाः सह Bootstrap 4 अनुकूलितं कुर्वन्तु तथा च नूतन- Sass-चर- सहितं वैश्विक-CSS-प्राथमिकताम् सहजतया टॉगलं कुर्वन्तु । चरस्य मूल्यं अधिलिखयन्तु npm run testतथा आवश्यकतानुसारं सह पुनः संकलयन्तु ।

scss/_variables.scssBootstrap इत्यस्य सञ्चिकायां प्रमुखवैश्विकविकल्पानां कृते एतानि चराः अन्वेष्टुं अनुकूलितुं च शक्नुवन्ति ।

चर इति	मूल्यानि	वर्णनम्‌
`$spacer`	`1rem`(पूर्वनिर्धारित), अथवा किसी भी मान > 0	अस्माकं स्पेसर उपयोगितानि प्रोग्रामेटिकरूपेण जनयितुं पूर्वनिर्धारितं स्पेसर मूल्यं निर्दिशति \|
`$enable-rounded`	`true`(पूर्वनिर्धारित) or`false`	विभिन्नघटकानाम् उपरि पूर्वनिर्धारितशैल्याः सक्षमीकरणं करोति `border-radius`।
`$enable-shadows`	`true`अथवा `false`(पूर्वनिर्धारित) .	विभिन्नघटकानाम् उपरि पूर्वनिर्धारितशैल्याः सक्षमीकरणं करोति `box-shadow`।
`$enable-gradients`	`true`अथवा `false`(पूर्वनिर्धारित) .	`background-image`विभिन्नघटकानाम् उपरि शैल्याः माध्यमेन पूर्वनिर्धारितप्रवणतां सक्षमं करोति ।
`$enable-transitions`	`true`(पूर्वनिर्धारित) or`false`	विभिन्नघटकानाम् उपरि पूर्वनिर्धारितं `transition`s सक्षमं करोति ।
`$enable-hover-media-query`	`true`अथवा `false`(पूर्वनिर्धारित) .	अप्रचलितः
`$enable-grid-classes`	`true`(पूर्वनिर्धारित) or`false`	ग्रिड्-प्रणाल्याः कृते CSS-वर्गाणां जननं सक्षमं करोति (उदा., `.container`, `.row`, `.col-md-1`, इत्यादि) ।
`$enable-caret`	`true`(पूर्वनिर्धारित) or`false`	पर छद्म तत्व caret सक्षम करता है `.dropdown-toggle`।
`$enable-print-styles`	`true`(पूर्वनिर्धारित) or`false`	मुद्रणस्य अनुकूलनार्थं शैल्याः सक्षमीकरणं करोति ।

वर्णं

Bootstrap इत्यस्य बहवः विविधाः घटकाः उपयोगिताश्च Sass मानचित्रे परिभाषितवर्णानां श्रृङ्खलायाः माध्यमेन निर्मिताः सन्ति । एतत् मानचित्रं Sass मध्ये लूप् कृत्वा शीघ्रं नियमसमूहानां श्रृङ्खलां जनयितुं शक्यते ।

सर्वे वर्णाः

Bootstrap 4 इत्यस्मिन् उपलभ्यमानाः सर्वे वर्णाः, Sass variables इत्यस्य रूपेण तथा च scss/_variables.scssसञ्चिकायां Sass map इत्यस्य रूपेण उपलभ्यन्ते । अतिरिक्तछायाः योजयितुं अनन्तरेषु लघुविमोचनेषु एतत् विस्तारितं भविष्यति, यथा वयं पूर्वमेव समाविष्टं ग्रेस्केल-पैलेट् ।

नील

नीलम्

शोण

पाटल

रक्त

नारङ्ग

पीतं

हरित

टील

सियान्

अत्र भवन्तः स्वस्य Sass मध्ये एतानि कथं उपयोक्तुं शक्नुवन्ति:

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

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

सेट् कृते अपि च वर्ण उपयोगिता वर्गाः उपलभ्यन्ते colorतथा च background-color.

भविष्ये वयं प्रत्येकस्य वर्णस्य छायानां कृते Sass maps तथा variables प्रदातुं लक्ष्यं करिष्यामः यथा वयं अधः grayscale वर्णैः सह कृतवन्तः ।

विषयवर्णाः

वयं सर्वेषां वर्णानाम् उपसमूहस्य उपयोगं कुर्मः यत् वर्णयोजनानि जनयितुं लघुतरं वर्णपैलेट् निर्मातुं शक्नुमः, यत् Sass चररूपेण अपि उपलभ्यते तथा च Bootstraps इत्यस्य scss/_variables.scssसञ्चिकायां Sass map इति ।

प्राथमिक

गौणम्

सफलता

संकट

चेतवानी

इन्फो

प्रकाशः

तिमिर

ग्रेजः

ग्रे चरानाम् एकः विस्तृतः समुच्चयः तथा च scss/_variables.scssभवतः परियोजनायां ग्रे इत्यस्य सुसंगतछायाणां कृते एकः Sass map in।

१००

२००

३०० इति

४०० इति

५००

६०० इति

७०० इति

८०० इति

९०० इति

, इत्यस्य अन्तः scss/_variables.scssभवन्तः Bootstrap इत्यस्य color variables तथा Sass map इत्येतत् प्राप्नुवन्ति । $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;

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

घटकाः

Bootstrap इत्यस्य बहवः घटकाः उपयोगिताश्च @eachलूप् इत्यनेन सह निर्मिताः सन्ति ये Sass मानचित्रस्य उपरि पुनरावृत्तिं कुर्वन्ति । अस्माकं द्वारा घटकस्य रूपान्तराणि जनयितुं $theme-colorsप्रत्येकस्य भङ्गबिन्दुस्य कृते प्रतिक्रियाशीलरूपान्तराणि निर्मातुं च एतत् विशेषतया सहायकं भवति । यथा भवान् एतानि Sass मानचित्राणि अनुकूलितं करोति पुनः संकलयति च तथा तथा भवान् स्वयमेव एतेषु लूप्स् मध्ये प्रतिबिम्बितानि स्वपरिवर्तनानि पश्यति ।

संशोधकाः

Bootstrap इत्यस्य बहवः घटकाः आधार-संशोधकवर्ग-पद्धत्या निर्मिताः सन्ति । अस्य अर्थः अस्ति यत् स्टाइलिंग् इत्यस्य बृहत् भागः आधारवर्गे (उदा., .btn) समाविष्टः भवति यदा शैलीविविधताः परिवर्तकवर्गेषु (उदा., .btn-danger) सीमिताः सन्ति । $theme-colorsएते modifier classes अस्माकं modifier classes इत्यस्य संख्यां नाम च customizing कर्तुं map तः निर्मिताः सन्ति ।

अत्र द्वौ उदाहरणौ स्तः यत् वयं कथं $theme-colorsmap इत्यस्य उपरि लूप् कृत्वा घटकं प्रति परिवर्तकान् जनयितुं .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);
}

प्रतिक्रियाशीलः

एते Sass लूप्स् केवलं वर्णनक्शेषु एव सीमिताः न सन्ति, अपि च । भवान् स्वघटकानाम् अथवा उपयोगितानां प्रतिक्रियाशीलविविधतां अपि जनयितुं शक्नोति । उदाहरणार्थं अस्माकं responsive text alignment utilities गृह्यताम् यत्र वयं Sass map @eachकृते एकं loop $grid-breakpointsइत्येतत् media query include इत्यनेन सह मिश्रयामः ।

@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स्वस्य परिवर्तनं कर्तुं प्रवृत्ताः भवेयुः तर्हि तस्य मानचित्रस्य उपरि पुनरावृत्तिं कुर्वन्तः सर्वेषु लूप्स् मध्ये भवतः परिवर्तनानि प्रवर्तन्ते ।

CSS चर

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

उपलब्ध चर

अत्र वयं समाविष्टाः चराः सन्ति (ध्यायन्तु यत् the :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 इत्यस्य चरानाम् समानं लचीलतां प्रदास्यन्ति, परन्तु ब्राउजर् प्रति सेवितुं पूर्वं संकलनस्य आवश्यकतां विना । यथा, अत्र वयं अस्माकं पृष्ठस्य font तथा link styles CSS variables इत्यनेन पुनः सेट् कुर्मः ।

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

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

--breakpoint-mdयद्यपि वयं मूलतः अस्माकं CSS चरयोः (उदा., ) breakpoints समाविष्टवन्तः , एते media queries मध्ये समर्थिताः न सन्ति , परन्तु तेषां उपयोगः media queries मध्ये rulesets अन्तः अद्यापि कर्तुं शक्यते । एते ब्रेकपॉइण्ट् चराः जावास्क्रिप्ट् द्वारा उपयोक्तुं शक्यन्ते इति दृष्ट्वा पश्चात् संगततायै संकलिते CSS मध्ये तिष्ठन्ति । spec मध्ये अधिकं ज्ञातुं शक्नुवन्ति।

अत्र किं न समर्थितं तस्य उदाहरणम् अस्ति ।

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

अत्र च किं समर्थितं तस्य उदाहरणम् अस्ति।

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