Source

थीमिङ बुटस्ट्र्याप

सजिलो विषयवस्तु र कम्पोनेन्ट परिवर्तनहरूको लागि विश्वव्यापी शैली प्राथमिकताहरूको लागि हाम्रो नयाँ निर्मित Sass चरहरूसँग बुटस्ट्र्याप 4 अनुकूलित गर्नुहोस्।

परिचय

distबुटस्ट्र्याप 3 मा, थिमिङ धेरै हदसम्म कम, अनुकूलन CSS, र हामीले हाम्रा फाइलहरूमा समावेश गरेको छुट्टै थिम स्टाइलसिटमा चल ओभरराइडहरूद्वारा संचालित थियो । केहि प्रयासको साथ, कोर फाइलहरू नछोइकन बुटस्ट्र्याप 3 को रूप पूर्ण रूपमा पुन: डिजाइन गर्न सकिन्छ। Bootstrap 4 ले परिचित, तर थोरै फरक दृष्टिकोण प्रदान गर्दछ।

अब, थिमिङ Sass चर, Sass नक्सा, र अनुकूलन CSS द्वारा पूरा भएको छ। त्यहाँ कुनै थप समर्पित विषयवस्तु स्टाइलसिट छैन; बरु, तपाईँले ढाँचा, छायाँ, र थप थप्नको लागि बिल्ट-इन थिम सक्षम गर्न सक्नुहुन्छ।

सास

चर, नक्सा, मिक्सिन, र थपको फाइदा लिन हाम्रो स्रोत सास फाइलहरू प्रयोग गर्नुहोस्।

फाइल संरचना

सम्भव भएसम्म, बुटस्ट्र्यापको मूल फाइलहरू परिमार्जन गर्नबाट जोगिनुहोस्। Sass को लागी, यसको मतलब तपाईको आफ्नै स्टाइलसिट सिर्जना गर्नु हो जसले बुटस्ट्र्याप आयात गर्दछ ताकि तपाई यसलाई परिमार्जन गर्न र विस्तार गर्न सक्नुहुनेछ। तपाईंले npm जस्तै प्याकेज प्रबन्धक प्रयोग गरिरहनुभएको छ भनी मान्नुहोस्, तपाईंसँग फाइल संरचना यस्तो देखिन्छ:

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

यदि तपाईंले हाम्रा स्रोत फाइलहरू डाउनलोड गर्नुभएको छ र प्याकेज प्रबन्धक प्रयोग गरिरहनुभएको छैन भने, तपाईंले बुटस्ट्र्यापको स्रोत फाइलहरूलाई आफ्नैबाट अलग राखेर म्यानुअल रूपमा त्यो संरचनासँग मिल्दोजुल्दो सेटअप गर्न चाहनुहुन्छ।

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

आयात गर्दै

तपाईको custom.scssमा, तपाईले बुटस्ट्र्यापको स्रोत सास फाइलहरू आयात गर्नुहुनेछ। तपाईंसँग दुईवटा विकल्पहरू छन्: सबै बुटस्ट्र्याप समावेश गर्नुहोस्, वा तपाईंलाई आवश्यक पर्ने भागहरू छान्नुहोस्। हामी पछिल्लोलाई प्रोत्साहन गर्छौं, यद्यपि त्यहाँ हाम्रा कम्पोनेन्टहरूमा केही आवश्यकताहरू र निर्भरताहरू छन् भनेर सचेत रहनुहोस्। तपाईंले हाम्रो प्लगइनहरूको लागि केही JavaScript समावेश गर्न आवश्यक हुनेछ।

// 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";

त्यो सेटअपको साथमा, तपाइँ तपाइँको Sass चर र नक्साहरू परिमार्जन गर्न सुरु गर्न सक्नुहुन्छ custom.scss। // Optionalतपाईले बुटस्ट्र्यापको भागहरू खण्ड अन्तर्गत आवश्यक रूपमा थप्न पनि सुरु गर्न सक्नुहुन्छ । bootstrap.scssहामी तपाइँको सुरूवात बिन्दुको रूपमा हाम्रो फाइलबाट पूर्ण आयात स्ट्याक प्रयोग गर्न सुझाव दिन्छौं ।

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

Bootstrap 4 मा प्रत्येक Sass चरले !defaultतपाईंलाई बुटस्ट्र्यापको स्रोत कोड परिमार्जन नगरी तपाईंको आफ्नै Sass मा चरको पूर्वनिर्धारित मान ओभरराइड गर्न अनुमति दिने झण्डा समावेश गर्दछ। आवश्यकता अनुसार चरहरू प्रतिलिपि गर्नुहोस् र टाँस्नुहोस्, तिनीहरूको मान परिमार्जन गर्नुहोस्, र !defaultझण्डा हटाउनुहोस्। यदि एक चल पहिले नै नियुक्त गरिएको छ भने, त्यसपछि यो बुटस्ट्र्यापमा पूर्वनिर्धारित मानहरू द्वारा पुन: नियुक्त गरिने छैन।

तपाईले बुटस्ट्र्यापको चरहरूको पूर्ण सूची फेला पार्नुहुनेछ scss/_variables.scss।

एउटै Sass फाइल भित्र चर ओभरराइडहरू पूर्वनिर्धारित चरहरू अघि वा पछि आउन सक्छ। यद्यपि, Sass फाइलहरू ओभरराइड गर्दा, तपाईंले Bootstrap को 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 नक्साहरूले !defaultझण्डा समावेश गर्दछ र ओभरराइड र विस्तार गर्न सकिन्छ।

हाम्रा केही सास नक्साहरू पूर्वनिर्धारित रूपमा खालीमा मर्ज गरिएका छन्। यो दिइएको 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";
...

आवश्यक कुञ्जीहरू

बुटस्ट्र्यापले सास नक्सा भित्र केहि विशिष्ट कुञ्जीहरूको उपस्थितिलाई मान्दछ जुन हामीले प्रयोग गर्यौं र यसलाई विस्तार गर्यौं। तपाईंले समावेश गरिएका नक्साहरूलाई अनुकूलन गर्दा, तपाईंले त्रुटिहरू सामना गर्न सक्नुहुन्छ जहाँ एउटा विशेष सास नक्साको कुञ्जी प्रयोग भइरहेको छ।

उदाहरणका लागि, हामी लिङ्कहरू, बटनहरू, र फारम अवस्थाहरूका लागि 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, वा सामान्य एक पनि यदि तपाईं अधिक भर्बोज हुन चाहनुहुन्छ भने।

रंग कन्ट्रास्ट

हामीले बुटस्ट्र्यापमा समावेश गर्ने एउटा अतिरिक्त प्रकार्य रङ कन्ट्रास्ट प्रकार्य हो 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`
}

Sass विकल्प

बुटस्ट्र्याप ४ लाई हाम्रो बिल्ट-इन कस्टम चर फाइलको साथ अनुकूलित गर्नुहोस् र नयाँ $enable-*Sass चरहरूसँग विश्वव्यापी CSS प्राथमिकताहरू सजिलैसँग टगल गर्नुहोस्। चरको मान ओभरराइड गर्नुहोस् र npm run testआवश्यकता अनुसार पुन: कम्पाइल गर्नुहोस्।

scss/_variables.scssतपाईंले बुटस्ट्र्यापको फाइलमा प्रमुख विश्वव्यापी विकल्पहरूको लागि यी चरहरू फेला पार्न र अनुकूलन गर्न सक्नुहुन्छ।

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

रङ

बुटस्ट्र्यापका धेरै कम्पोनेन्टहरू र उपयोगिताहरू सास नक्सामा परिभाषित रङहरूको शृङ्खला मार्फत बनाइएका छन्। यो नक्सा Sass मा छिट्टै नियमहरूको एक श्रृंखला उत्पन्न गर्न लुप गर्न सकिन्छ।

सबै रंगहरू

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

निलो

इन्डिगो

बैजनी

गुलाबी

रातो

सुन्तला

पहेंलो

हरियो

चिसो

स्यान

यहाँ तपाइँ कसरी तपाइँको 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हामी रङ योजनाहरू उत्पन्न गर्नको लागि सानो रङ प्यालेट सिर्जना गर्न सबै रङहरूको सबसेट प्रयोग गर्छौं, जुन Sass चर र बुटस्ट्र्यापको फाइलमा Sass नक्साको रूपमा पनि उपलब्ध छ ।

प्राथमिक

माध्यमिक

सफलता

खतरा

चेतावनी

जानकारी

उज्यालो

अँध्यारो

खैरो

खरानी चरहरूको एक विस्तृत सेट र scss/_variables.scssतपाईंको प्रोजेक्टमा खरानीको सुसंगत शेडहरूको लागि सास नक्सा।

१००

२००

३००

४००

५००

६००

७००

८००

९००

भित्र scss/_variables.scss, तपाईंले बुटस्ट्र्यापको रङ चर र Sass नक्सा फेला पार्नुहुनेछ। $colorsयहाँ Sass नक्सा को एक उदाहरण छ :

$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 नक्साको प्रयोग गर्ने योजना बनाउनुहोस्।

अवयवहरू

बुटस्ट्र्यापका धेरै कम्पोनेन्टहरू र उपयोगिताहरू @eachलूपहरूसँग बनाइएका छन् जुन सास नक्सामा पुनरावृत्ति हुन्छ। यो हाम्रो द्वारा कम्पोनेन्टको भेरियन्टहरू उत्पन्न गर्न $theme-colorsर प्रत्येक ब्रेकपोइन्टको लागि उत्तरदायी भेरियन्टहरू सिर्जना गर्नको लागि विशेष गरी उपयोगी छ। तपाईंले यी सास नक्साहरू अनुकूलित गर्दा र पुन: कम्पाइल गर्दा, तपाईंले यी लूपहरूमा आफ्ना परिवर्तनहरू स्वतः देख्नुहुनेछ।

परिमार्जकहरू

बुटस्ट्र्यापका धेरै कम्पोनेन्टहरू आधार-परिमार्जक वर्ग दृष्टिकोणको साथ बनाइएका छन्। यसको मतलब स्टाइलको ठूलो हिस्सा आधार वर्ग (जस्तै, .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, तपाईंका परिवर्तनहरू नक्सामा दोहोरिने सबै लूपहरूमा लागू हुनेछन्।

CSS चरहरू

बुटस्ट्र्याप 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), यी मिडिया क्वेरीहरूमा समर्थित छैनन् , तर तिनीहरू अझै पनि मिडिया क्वेरीहरूमा नियमहरू भित्र प्रयोग गर्न सकिन्छ। यी ब्रेकपोइन्ट चरहरू ब्याकवर्ड कम्प्याटिबिलिटीका लागि कम्पाइल गरिएको CSS मा रहन्छन् किनभने तिनीहरूलाई JavaScript द्वारा प्रयोग गर्न सकिन्छ। विवरणमा थप जान्नुहोस्।

यहाँ के समर्थित छैन को एक उदाहरण छ:

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

र यहाँ के समर्थित छ को एक उदाहरण छ:

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