in English

सस्स

चर, नक्शे, मिक्सिन, ते फंक्शनें दा फायदा लैने आस्तै साढ़ी स्रोत 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. 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/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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. ध्यान रक्खो तुसें गी साढ़ी जरूरतें ते विकल्पें दे बीच इसगी सम्मिलित करना होग:

// 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";
// 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 2.0 सुलभता मानकें गी पूरा करने आस्तै , लेखकें गी घट्ट शा घट्ट 4.5:1 दा विपरीत अनुपात प्रदान करना होग , बड्डे पैमाने पर अपवादें कन्नै ।

बूटस्ट्रैप च अस शामल इक अतिरिक्त फंक्शन ऐ रंग विपरीत फंक्शन, color-contrast. एह् निर्दिश्ट आधार रंग दे आधार उप्पर इक प्रकाश ( ), काला ( ) जां काला ( ) विपरीत रंग गी स्वतः वापस करने आस्तै इक कलरस्पेस च सापेक्ष चमक दे आधार उप्पर कंट्रास्ट थ्रेशोल्ड दी गणना आस्तै WCAG 2.0 एल्गोरिथ्म दा उपयोग करदा ऐ। एह् फंक्शन खास करियै मिक्सिन जां लूप आस्तै उपयोगी ऐ जित्थै तुस मते सारे वर्गें गी पैदा करा करदे ओ.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
  }
}