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

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

परिचय

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

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

सास

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

फाइल संरचना

सम्भव भएसम्म, बुटस्ट्र्यापको मूल फाइलहरू परिमार्जन गर्नबाट जोगिनुहोस्। 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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

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

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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हामी तपाइँको सुरूवात बिन्दुको रूपमा हाम्रो फाइलबाट पूर्ण आयात स्ट्याक प्रयोग गर्न सुझाव दिन्छौं ।

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

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

तपाईले बुटस्ट्र्यापको चरहरूको पूर्ण सूची फेला पार्नुहुनेछ scss/_variables.scss। केही चरहरू सेट गरिएका छन् null, यी चरहरूले तपाईंको कन्फिगरेसनमा ओभरराइड नगरेसम्म गुणलाई आउटपुट गर्दैनन्।

चर ओभरराइडहरू हाम्रा प्रकार्यहरू, चरहरू, र मिक्सिनहरू आयात गरिसकेपछि आउनु पर्छ, तर बाँकी आयातहरू अघि।

यहाँ एउटा उदाहरण छ जसले npm मार्फत बुटस्ट्र्याप आयात र कम्पाइल गर्दा background-colorपरिवर्तन colorगर्दछ :<body>

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

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

बुटस्ट्र्यापमा कुनै पनि चरको लागि आवश्यक रूपमा दोहोर्याउनुहोस्, तलका विश्वव्यापी विकल्पहरू सहित।

नक्सा र लूपहरू

बुटस्ट्र्याप 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`
}

Escape SVG

हामी SVG पृष्ठभूमि छविहरूको लागि , र क्यारेक्टरहरू escape-svgभाग्नको लागि प्रकार्य प्रयोग गर्छौं। IE मा पृष्ठभूमि छविहरू राम्ररी प्रस्तुत गर्न यी क्यारेक्टरहरू भाग्न आवश्यक छ। प्रकार्य प्रयोग गर्दा , डाटा URI हरू उद्धृत हुनुपर्छ।<>#escape-svg

कार्यहरू थप्नुहोस् र घटाउनुहोस्

हामी CSS प्रकार्य लपेट्न addर प्रकार्यहरू प्रयोग गर्छौं । यी प्रकार्यहरूको प्राथमिक उद्देश्य त्रुटिहरूबाट बच्नु हो जब "एकविहीन" मान अभिव्यक्तिमा पारित हुन्छ। गणितीय रूपमा सही भए तापनि सबै ब्राउजरहरूमा त्रुटि फर्काउने जस्ता अभिव्यक्तिहरू ।subtractcalc0calccalc(10px - 0)

उदाहरण जहाँ क्याल्क मान्य छ:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

उदाहरण जहाँ क्याल्क अमान्य छ:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Sass विकल्प

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

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

रङ

बुटस्ट्र्यापका धेरै कम्पोनेन्टहरू र उपयोगिताहरू सास नक्सामा परिभाषित रङहरूको शृङ्खला मार्फत बनाइएका छन्। यो नक्सा 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।

विषयवस्तु रङहरू

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, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --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);
  }
}