सास
तेजी से निर्माण करने और अपनी परियोजना को अनुकूलित करने में आपकी मदद करने के लिए चर, मानचित्र, मिश्रण और कार्यों का लाभ उठाने के लिए हमारे स्रोत 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";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. 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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
नीचे दिए गए वैश्विक विकल्पों सहित, बूटस्ट्रैप में किसी भी चर के लिए आवश्यकतानुसार दोहराएं।
मानचित्र और लूप
बूटस्ट्रैप में मुट्ठी भर 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
। सावधान रहें कि आपको इसे हमारी आवश्यकताओं और विकल्पों के बीच सम्मिलित करना होगा:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// 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 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
और फ़ंक्शन का उपयोग करते हैं। इन कार्यों का प्राथमिक उद्देश्य त्रुटियों से बचने के लिए है जब एक "इकाई रहित" मान को अभिव्यक्ति में पारित किया जाता है । गणितीय रूप से सही होने के बावजूद, जैसे भाव सभी ब्राउज़रों में एक त्रुटि लौटाएंगे।subtract
calc
0
calc
calc(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
}
}