सस्स

चर, नक्शा, मिक्सिन, आरू फंक्शन के लाभ उठाबै लेली हमरऽ स्रोत Sass फाइल के उपयोग करऽ ताकि आपक॑ तेजी स॑ निर्माण आरू अपनऽ प्रोजेक्ट क॑ अनुकूलित करै म॑ मदद मिल॑ सक॑ ।

इस पेज पर

चर, नक्शा, मिक्सिन, आरू बहुत कुछ के लाभ उठाबै लेली हमरऽ स्रोत Sass फाइल के उपयोग करलऽ जाय ।

फाइल संरचना

जखन संभव होयत, बूटस्ट्रैप क कोर फाइल कए संशोधित करबा स बचू. सास के लेल, एकरऽ मतलब छै कि अपनऽ स्टाइलशीट बनाना जे बूटस्ट्रैप क॑ आयात करै छै ताकि आप ओकरा संशोधित करी क॑ विस्तारित करी सक॑ । मानल जाय जे अहाँ npm सन पैकेज प्रबंधक क उपयोग कए रहल छी, अहाँक पास एकटा फाइल संरचना होएत जे एहि तरहेँ देखाएत:

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

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

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

आयात करब

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

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

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

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

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

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

अहाँकेँ बूटस्ट्रैप क चर क पूरा सूची scss/_variables.scss. किछु चर पर सेट कएल गेल अछि null, ई चर गुण आउटपुट नहि करैत अछि जाबत धरि ओ अहाँक विन्यास मे ओवरराइड नहि कएल जाइत अछि.

चर ओवरराइड हमर फंक्शन के आयात के बाद आबय के चाही, मुदा बाकी आयात स पहिने.

एतय एकटा उदाहरण अछि जे npm क माध्यम स बूटस्ट्रैप आयात आओर संकलित करबा काल background-colorआओर colorक लेल बदलैत अछि:<body>

// Required
@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/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

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

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

हमर स्टार्टर प्रोजेक्ट के साथ npm के माध्यम स Bootstrap के साथ शुरू करू ! twbs /bootstrap-npm-starter टेम्पलेट रिपोजिटरी पर जाउ आ देखू जे कोना अपन npm प्रोजेक्ट मे Bootstrap क निर्माण आओर अनुकूलित कएल जाए. Sass कंपाइलर, ऑटोप्रिफिक्सर, स्टाइललिंट, PurgeCSS, आओर बूटस्ट्रैप आइकन शामिल अछि.

नक्शे एवं लूप

बूटस्ट्रैप मे मुट्ठी भर सास मैप, कुंजी मूल्य जोड़ी शामिल छै जे संबंधित सीएसएस कें परिवारक कें उत्पन्न करनाय आसान बनायत छै. हम अपन रंग, ग्रिड ब्रेकपॉइंट, आओर बहुत किछु के लेल Sass नक्शा के उपयोग करैत छी. ठीक Sass चर के तरह, सब Sass नक्शा म॑ !defaultफ्लैग शामिल छै आरू ओकरा ओवरराइड करी क॑ विस्तारित करलऽ जाब॑ सकै छै ।

हमरऽ कुछ सास नक्शा डिफ़ॉल्ट रूप स॑ खाली म॑ मर्ज करलऽ गेलऽ छै । ई कोनो देलऽ गेलऽ सास नक्शा केरऽ आसानी स॑ विस्तार करै लेली करलऽ जाय छै, लेकिन ई कीमत प॑ आबै छै कि नक्शा स॑ वस्तु हटाबै म॑ कनि मुश्किल होय जाय छै ।

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

नक्शा मे सब चर $theme-colorsके स्टैंडअलोन चर के रूप मे परिभाषित कयल गेल अछि | हमरऽ नक्शा म॑ मौजूदा रंग क॑ संशोधित करै लेली $theme-colors, अपनऽ कस्टम Sass फाइल म॑ निम्नलिखित जोड़ऽ:

$primary: #0074d9;
$danger: #ff4136;

बाद मे, ई चर बूटस्ट्रैप क $theme-colorsनक्शा मे सेट कएल गेल अछि:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

नक्शा मे जोड़ू

$theme-colorsअपनऽ कस्टम मानऽ के साथ नया Sass नक्शा बनाबै आरू ओकरा मूल नक्शा के साथ विलय करी क॑ , या कोनो अन्य नक्शा म॑ नया रंग जोड़ै छै । एहि स्थिति मे, हम एकटा नव $custom-colorsनक्शा बना देब आओर ओकरा $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

नक्शा से हटाएँ

$theme-colors, वा कोनो आन नक्शासँ रंग हटाबए लेल , प्रयोग करू map-remove. सावधान रहू अहाँ $theme-colorsहमर आवश्यकताक बीच मे सम्मिलित करबाक चाही ठीक एकर परिभाषा मे variablesआ एकर उपयोग सँ पहिने maps:

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

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

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

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

आवश्यक कुंजी

बूटस्ट्रैप सास मैप के भीतर किछु विशिष्ट कुंजी के उपस्थिति के मानैत अछि जेना कि हम सब स्वयं एहि सब के प्रयोग करैत छी आ विस्तार करैत छी | जेना-जेना अहां शामिल नक्शाक कें अनुकूलित करय छी, अहां कें त्रुटि कें सामना करय पड़य छै जतय कोनों विशिष्ट सास नक्शा कें कुंजी कें उपयोग कैल जा रहल छै.

उदाहरण के लेल, हम लिंक, बटन, आ फॉर्म स्टेट के लेल primary, success, आ dangerकुंजी के उपयोग करैत छी | $theme-colorsएहि कुंजी सभक मान बदलब कोनो मुद्दा नहि प्रस्तुत करबाक चाही, मुदा ओकरा हटाबए सँ Sass संकलन समस्या भ' सकैत अछि. अइ दृष्टांतक मे, अहां कें ओय मानक कें उपयोग करय वाला सैस कोड कें संशोधित करय कें होयत.

कार्य

रंग

हमरा सब लग जे सस मैप अछि ओकर बगल मे थीम कलर क उपयोग स्टैंडअलोन वैरिएबल क रूप मे सेहो कैल जा सकैत अछि, जेना $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()अहां बूटस्ट्रैप आओर shade-color()फंक्शन सं रंग हल्का या गहरा क सकय छी . ई फंक्शन रंग क॑ कारी या सफेद के साथ मिलाबै छै, जे सस केरऽ नेटिव lighten()आरू darken()फंक्शन के विपरीत छै जे हल्कापन क॑ एक निश्चित मात्रा म॑ बदली देतै, जेकरा स॑ अक्सर वांछित प्रभाव नै मिलै छै ।

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

व्यवहार में, अहाँ फंक्शन के कॉल करब आ रंग आ वजन पैरामीटर में पास करब.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

रंग विपरीतता

वेब सामग्री सुलभता दिशानिर्देश (WCAG) विपरीत आवश्यकताक कें पूरा करय कें लेल, लेखकक कें न्यूनतम पाठ रंग विपरीत 4.5:1 आ न्यूनतम गैर-पाठ रंग विपरीतता 3:1 प्रदान करनाय आवश्यक छै , बहुत कम अपवादक कें साथ.

एहि मे मदद करबाक लेल हम color-contrastबूटस्ट्रैप मे फंक्शन शामिल केलहुं। इ एकटा रंग स्पेस म॑ सापेक्षिक चमक के आधार प॑ कंट्रास्ट थ्रेशोल्ड के गणना लेली WCAG कंट्रास्ट रेशियो एल्गोरिथ्म के उपयोग करै छै ताकि निर्दिष्ट आधार रंग के आधार प॑ स्वचालित रूप स॑ हल्का ( ), गहरा ( ) या काला ( ) कंट्रास्ट रंग वापस करलऽ जाय सक॑ । इ फंक्शन विशेष रूप सं मिक्सिन या लूप कें लेल उपयोगी छै जतय अहां कईटा क्लास जेनरेट करय रहल छी.sRGB#fff#212529#000

जेना, हमर $theme-colorsनक्शा स रंग नमूना जेनरेट करबाक लेल:

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

एकर उपयोग एक बेर कें कंट्रास्ट जरूरतक कें लेल सेहो कैल जा सकय छै:

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

अहां हमर रंग नक्शा फंक्शन के साथ एकटा आधार रंग सेहो निर्दिष्ट क सकय छी:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

एसवीजी से बच

हम escape-svgफंक्शन क उपयोग करकय , और SVG बैकग्राउंड इमेजेज क े ललए वर्ण क े बचने क <े >ललए #| फंक्शन कें उपयोग करयत समय 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);
}

उदाहरण जहाँ calc अमान्य अछि:

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

मिक्सिन

हमरऽ scss/mixins/डायरेक्टरी म॑ एक टन मिक्सिन छै जे बूटस्ट्रैप केरऽ भागऽ क॑ पावर दै छै आरू एकरऽ उपयोग पूरा अपनऽ प्रोजेक्ट म॑ भी करलऽ जाब॑ सकै छै ।

रंग योजनाएँ

मीडिया क्वेरी कें लेल एकटा आशुलिपि मिक्सिन , , आ कस्टम रंग योजनाक prefers-color-schemeकें समर्थन कें साथ उपलब्ध छै .lightdark

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}