सस

व्हेरिएबल्स, नकाशे, मिक्सिन्स आणि फंक्शन्सचा फायदा घेण्यासाठी आमच्या स्त्रोत Sass फाइल्सचा वापर करा ज्यामुळे तुम्हाला तुमचा प्रोजेक्ट जलद तयार करण्यात आणि सानुकूलित करण्यात मदत होईल.

या पृष्ठावर

व्हेरिएबल्स, नकाशे, मिक्सिन्स आणि अधिकचा लाभ घेण्यासाठी आमच्या स्त्रोत Sass फाइल्सचा वापर करा.

फाइल संरचना

जेव्हा शक्य असेल तेव्हा, बूटस्ट्रॅपच्या मुख्य फाइल्समध्ये बदल करणे टाळा. Sass साठी, याचा अर्थ बूटस्ट्रॅप आयात करणारी तुमची स्वतःची स्टाइलशीट तयार करणे म्हणजे तुम्ही त्यात सुधारणा आणि विस्तार करू शकता. तुम्ही एनपीएम सारखे पॅकेज मॅनेजर वापरत आहात असे गृहीत धरून, तुमच्याकडे अशी फाइल संरचना असेल जी यासारखी दिसते:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

तुम्ही आमच्या सोर्स फाइल्स डाउनलोड केल्या असतील आणि पॅकेज मॅनेजर वापरत नसाल, तर तुम्हाला बूटस्ट्रॅपच्या सोर्स फाइल्स तुमच्या स्वतःहून वेगळ्या ठेवून त्या स्ट्रक्चरसारखे काहीतरी मॅन्युअली तयार करायचे आहे.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

आयात करत आहे

तुमच्या custom.scssमध्ये, तुम्ही बूटस्ट्रॅपच्या स्रोत Sass फाइल्स आयात कराल. तुमच्याकडे दोन पर्याय आहेत: सर्व बूटस्ट्रॅप समाविष्ट करा किंवा तुम्हाला आवश्यक असलेले भाग निवडा. आम्‍ही नंतरचे प्रोत्‍साहन करतो, तरीही लक्षात असू द्या की आमच्या घटकांमध्‍ये काही आवश्‍यकता आणि अवलंबित्व आहेत. आमच्या प्लगइनसाठी तुम्हाला काही JavaScript देखील समाविष्ट करणे आवश्यक आहे.

// 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 द्वारे बूटस्ट्रॅपसह प्रारंभ करा! तुमच्या स्वतःच्या npm प्रोजेक्टमध्ये बूटस्ट्रॅप कसा बनवायचा आणि सानुकूलित कसा करायचा हे पाहण्यासाठी twbs/bootstrap-npm-starter टेम्पलेट रेपॉजिटरीकडे जा. Sass कंपाइलर, ऑटोप्रीफिक्सर, स्टाइलिंट, पर्जसीएसएस आणि बूटस्ट्रॅप चिन्हांचा समावेश आहे.

नकाशे आणि लूप

बूटस्ट्रॅपमध्ये मूठभर 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 नकाशेमध्ये काही विशिष्ट की ची उपस्थिती गृहीत धरते कारण आम्ही या स्वतः वापरतो आणि विस्तारित करतो. तुम्ही समाविष्ट केलेले नकाशे सानुकूलित करता तेव्हा, विशिष्ट Sass नकाशाची की वापरली जात असताना तुम्हाला त्रुटी येऊ शकतात.

उदाहरणार्थ, आम्ही लिंक्स, बटणे आणि फॉर्म स्टेटसाठी , primary, successआणि dangerकी वापरतो. $theme-colorsया की ची मूल्ये बदलल्याने कोणतीही समस्या उद्भवू नये, परंतु त्यांना काढून टाकल्याने Sass संकलन समस्या उद्भवू शकतात. या उदाहरणांमध्ये, तुम्हाला त्या मूल्यांचा वापर करणार्‍या Sass कोडमध्ये सुधारणा करणे आवश्यक आहे.

कार्ये

रंग

आमच्याकडे असलेल्या 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

आम्ही SVG पार्श्वभूमी प्रतिमांसाठी , आणि वर्ण escape-svgसुटण्यासाठी फंक्शन वापरतो. फंक्शन वापरताना , डेटा URI उद्धृत करणे आवश्यक आहे.<>#escape-svg

फंक्शन्स जोडा आणि वजा करा

CSS फंक्शन रॅप करण्यासाठी आम्ही 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
  }
}