ससस के बा

हमनी के स्रोत 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

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

नक्शा आ लूप के बारे में बतावल गइल बा

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

उदाहरण खातिर, हमनी के लिंक, बटन, आ फॉर्म स्टेट खातिर primary, success, आ dangerसे के कुंजी के इस्तेमाल करेनी जा। $theme-colorsएह कुंजी सभ के मान बदले से कौनों मुद्दा ना होखे के चाहीं, बाकी इनहन के हटावे से सास संकलन के मुद्दा पैदा हो सके ला। एह दसा सभ में, रउआँ के ओह मान सभ के इस्तेमाल करे वाला सास कोड के संशोधित करे के पड़ी।

काम करेला

रंग-बिरंग के बा

हमनी के लगे जवन सास मैप बा ओकरा बगल में , थीम रंग के स्टैंडअलोन चर के रूप में भी इस्तेमाल कइल जा सकेला, जइसे कि $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 फंक्शन के लपेटे खातिर addand फंक्शन के इस्तेमाल करेनी जा । एह फंक्शन सभ के प्राथमिक मकसद ई होला कि जब कौनों एक्सप्रेशन में "यूनिटलेस" मान पास कइल जाला तब त्रुटि से बचे के पड़े । जइसे कि अभिव्यक्ति सभ ब्राउजर सभ में एगो त्रुटि वापस करी, गणितीय रूप से सही होखे के बावजूद।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
  }
}