सास

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

इस पृष्ठ पर

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

मानचित्र और लूप

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

हमारे कुछ Sass मानचित्र डिफ़ॉल्ट रूप से खाली में विलय कर दिए जाते हैं। यह किसी दिए गए Sass मानचित्र के आसान विस्तार की अनुमति देने के लिए किया जाता है, लेकिन किसी मानचित्र से आइटम को निकालना थोड़ा अधिक कठिन बनाने की कीमत पर आता है।

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

मानचित्र में सभी चरों $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इन चाबियों के मूल्यों को बदलने से कोई समस्या नहीं होनी चाहिए, लेकिन उन्हें हटाने से Sass संकलन समस्याएँ हो सकती हैं। इन उदाहरणों में, आपको उन मानों का उपयोग करने वाले Sass कोड को संशोधित करना होगा।

कार्यों

रंग की

हमारे पास Sass मानचित्रों के आगे , थीम रंगों का उपयोग स्टैंडअलोन चर के रूप में भी किया जा सकता है, जैसे $primary.

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

tint-color()आप बूटस्ट्रैप और shade-color()फ़ंक्शंस के साथ रंगों को हल्का या गहरा कर सकते हैं। ये फ़ंक्शन Sass के मूल 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बूटस्ट्रैप में फंक्शन को शामिल किया। यह निर्दिष्ट आधार रंग के आधार पर स्वचालित रूप से एक प्रकाश ( ), गहरा ( ) या काला ( ) कंट्रास्ट रंग वापस करने के लिए रंग स्थान में सापेक्ष ल्यूमिनेंस के आधार पर कंट्रास्ट थ्रेसहोल्ड की गणना के लिए डब्ल्यूसीएजी कंट्रास्ट अनुपात एल्गोरिदम का उपयोग करता है। यह फ़ंक्शन विशेष रूप से मिक्सिन या लूप के लिए उपयोगी है जहां आप कई वर्ग उत्पन्न कर रहे हैं।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मीडिया क्वेरी के लिए एक शॉर्टहैंड मिक्सिन light, dark, और कस्टम रंग योजनाओं के समर्थन के साथ उपलब्ध है।

@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
  }
}