सस्स

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

इस पेज पर

चर, नक्शे, मिक्सिन, ते होर मते दा फायदा लैने आस्तै साढ़ी स्रोत Sass फाइलें दा उपयोग करो।

फाइल दा ढांचा

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

// 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 दे राहें बूटस्ट्रैप कन्नै शुरू करो! अपने खुद दे npm प्रोजेक्ट च बूटस्ट्रैप गी बनाने ते अनुकूलित करने दा तरीका दिक्खने आस्तै twbs/bootstrap-npm-starter टेम्पलेट रिपोजिटरी च जाओ . Sass कंपाइलर, ऑटोप्रिफिक्सर, स्टाइलिंट, PurgeCSS, ते बूटस्ट्रैप आइकन शामल न।

नक्शे ते लूप

बूटस्ट्रैप च मुट्ठी भर Sass नक्शे, कुंजी मूल्य जोड़े शामल न जेह् ड़े सरबंधत CSS दे परिवारें गी पैदा करना सखल्ला बनांदे न। अस अपने रंगें, ग्रिड ब्रेकपॉइंटें, ते होर मते सारें लेई 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

जरूरी कुंजी

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

मसाल आस्तै, अस लिंक, बटन, ते फार्म स्टेटें आस्तै 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फंक्शन दा इस्तेमाल करदे आं <, >ते #एसवीजी बैकग्राउंड छवियें आस्तै वर्णें गी बचने आस्तै। फंक्शन दा उपयोग करदे बेल्लै escape-svgडेटा यूआरआई गी उद्धृत करना जरूरी ऐ।

जोड़ना ते घटाना फंक्शन

अस सीएसएस फंक्शन गी लपेटने लेई 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);
}

मिक्सिन

साढ़ी 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
  }
}