सास

तुमकां बेगीन तयार करपाक आनी तुमचो प्रकल्प पसंतीचे करपाक मदत करपाक चड-उणें, नकाशे, मिक्सिन, आनी कार्यांचो फायदो घेवपाक आमच्या स्रोत Sass फायलींचो वापर करचो.

ह्या पानाचेर

चड-उणें, नकाशे, मिक्सिन, आनी हेरांचो फायदो घेवपाक आमच्या स्रोत Sass फायलींचो वापर करचो.

फायल रचणूक

शक्य आसल्यार, Bootstrap च्या कोर फायलींनी बदल करप टाळचें. Sass खातीर, ताचो अर्थ बूटस्ट्रॅप आयात करपी तुमचें स्वताचें स्टायलशीट तयार करप जेणे करून तुमी तातूंत बदल करूंक शकतात आनी विस्तार करूंक शकतात. तुमी npm सारको पॅकेज वेवस्थापक वापरतात अशें मानल्यार, तुमकां अशी दिसपी फायल रचणूक आसतली:

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

तुमी आमच्यो स्त्रोत फायली डाउनलोड केल्यात आनी पॅकेज वेवस्थापक वापरनात जाल्यार, तुमकां त्या संरचने सारकें कितें तरी हाताळणीन सेटअप करूंक जाय आसतलें, Bootstrap ची स्त्रोत फायली तुमच्या स्वताच्या फायलीं परस वेगळी दवरून.

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

आयात करप

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

// 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तुमचो सुरवातीचो बिंदू म्हणून वापरपाची सुचोवणी करतात.

चडांत चड मुलभूत आसतात

Bootstrap तल्या दर एका Sass चडांत !defaultचडांत Bootstrap च्या स्त्रोत कोडांत बदल करिनासतना तुमच्या स्वताच्या Sass त चक्राचें मुलभूत मोल ओव्हररायड करपाक परवानगी दिवपी ध्वज आसपावीत करता. गरज पडल्यार चड-उणें कॉपी आनी पेस्ट करात, तांचीं मोलां बदलचीं, आनी !defaultध्वज काडून उडोवचें. जर एक चडांत चड पयलींच नेमिल्लो आसत जाल्यार, मागीर तो बूटस्ट्रॅपांतल्या मुलभूत मोलांवरवीं परतून नेमचो ना.

तुमकां Bootstrap च्या व्हेरिएबलांची पुराय वळेरी हातूंत मेळटली scss/_variables.scss. कांय चड-उणें सेट केल्यात null, हे चड-उणें तुमच्या संरचनेंत अधिलिखित केल्या बगर गुणधर्म आउटपुट करिनात.

आमचीं फंक्शनां आयात केल्या उपरांत, पूण उरिल्ल्या आयातां पयलीं व्हेरिएबल ओव्हररायड येवंक जाय.

हांगा एक उदाहरण आसा जें npm वरवीं Bootstrap आयात आनी संकलित करतना 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

बूटस्ट्रॅपांतल्या खंयच्याय चक्राखातीर गरज पडल्यार परतून करात, सकयल दिल्ल्या जागतीक पर्यायां सयत.

आमच्या स्टार्टर प्रकल्पा वांगडा npm वरवीं Bootstrap कडेन सुरवात करात! तुमच्या स्वताच्या npm प्रकल्पांत Bootstrap कसो तयार करचो आनी पसंतीचो करचो तें पळोवपाक twbs/bootstrap-npm-starter साचा भंडारांत वचचें . Sass संकलक, ऑटोप्रिफिक्सर, स्टायललिंट, PurgeCSS, आनी बूटस्ट्रॅप चिन्नांचो आस्पाव आसा.

नकाशे आनी वळीं

बूटस्ट्रॅपांत मुठीभर Sass नकाशे, संबंदीत CSS कुटुंबां तयार करप सोंपें करपी कळ मोल जोडी आसपावीत आसात. आमी आमच्या रंगां खातीर, ग्रिड ब्रेकपॉइंट आनी हेर खातीर Sass नकाशे वापरतात. जशें Sass चडांत चड, सगळ्या Sass नकाशांनी !defaultध्वज आसपावीत केला आनी तांकां ओव्हररायड करून विस्तारूंक मेळटा.

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

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

कार्यां करतात

रंगांचो आस्पाव जाता

आमचे कडेन आशिल्ल्या Sass नकाशां बरोबर, थीम रंग स्टँडअलोन व्हेरिएबल म्हणूनय वापरूं येतात, जशे की $primary.

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

tint-color()तुमी Bootstrap's आनी 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`
}

एसव्हीजी पासून पळून वचप

आमी फंक्शन वापरतात , आनी SVG पार्श्वभूंय प्रतिमांखातीर अक्षरां escape-svgसुटका करपाक . फंक्शन वापरतना , डेटा URIs उद्धृत करपाक जाय.<>#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
  }
}