सस्स

अस्माकं स्रोत Sass सञ्चिकानां उपयोगं कुर्वन्तु यत् चर, मानचित्रं, मिक्सिन्, तथा कार्याणि च भवतः परियोजनां शीघ्रं निर्मातुं अनुकूलितुं च सहायकं भवति।

इस पृष्ठ पर

चर, मानचित्र, मिक्सिन्, इत्यादीनां लाभं ग्रहीतुं अस्माकं स्रोत Sass सञ्चिकानां उपयोगं कुर्वन्तु ।

सञ्चिका संरचना

यदा यदा सम्भवं तदा Bootstrap इत्यस्य मूलसञ्चिकानां परिवर्तनं परिहरन्तु । Sass कृते, तस्य अर्थः अस्ति यत् Bootstrap इत्यस्य आयातं कृत्वा स्वस्य stylesheet रचयतु येन भवान् तत् परिवर्तयितुं विस्तारयितुं च शक्नोति । भवान् 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";

// 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 इत्यस्य भागान् योजयितुं अपि आरभुं शक्नुवन्ति । अस्माकं bootstrap.scssसञ्चिकातः पूर्णं import stack इत्यस्य उपयोगं भवतः आरम्भबिन्दुरूपेण कर्तुं वयं सुचयामः ।

चर पूर्वनिर्धारित

Bootstrap मध्ये प्रत्येकं Sass चरं !defaultध्वजं समावेशयति यत् भवन्तं Bootstrap इत्यस्य स्रोतसङ्केतं परिवर्तयित्वा स्वस्य Sass मध्ये चरस्य पूर्वनिर्धारितमूल्यं अधिलिखितुं शक्नोति आवश्यकतानुसारं चरानाम् प्रतिलिपिं कृत्वा चिनोतु, तेषां मूल्यानि परिवर्तयन्तु, !defaultध्वजं च निष्कासयन्तु । यदि कश्चन चरः पूर्वमेव नियुक्तः अस्ति, तर्हि Bootstrap मध्ये पूर्वनिर्धारितमूल्यैः पुनः नियुक्तः न भविष्यति ।

Bootstrap इत्यस्य चरानाम् सम्पूर्णसूचीं भवन्तः scss/_variables.scss. केचन चराः - इति सेट् भवन्ति null, एते चराः गुणं न निर्गच्छन्ति यावत् ते भवतः विन्यासे अधिलिखिताः न भवन्ति ।

अस्माकं कार्याणां आयातस्य अनन्तरं, परन्तु शेष आयातानां पूर्वं चर-अवरोहणं अवश्यमेव आगन्तुं भवति ।

अत्र एकं उदाहरणं यत् npm मार्गेण Bootstrap आयातं संकलनं च कुर्वन् background-colorand colorfor the परिवर्तयति:<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

Bootstrap इत्यस्मिन् कस्यापि चरस्य कृते यथा आवश्यकं पुनरावृत्तिं कुर्वन्तु, यत्र अधः वैश्विकविकल्पाः सन्ति ।

अस्माकं प्रारम्भिकप्रकल्पेन सह npm मार्गेण Bootstrap इत्यनेन सह आरभत! स्वस्य npm परियोजनायां Bootstrap इत्यस्य निर्माणं अनुकूलनं च कथं करणीयम् इति द्रष्टुं twbs/bootstrap-npm-starter टेम्पलेट् भण्डारं प्रति गच्छन्तु । Sass compiler, Autoprefixer, Stylelint, PurgeCSS, तथा Bootstrap Icons इत्यादीनि समाविष्टानि सन्ति ।

मानचित्र एवं पाश

बूटस्ट्रैप् मध्ये Sass मानचित्रस्य मुष्टिभ्यां, कुञ्जीमूल्ययुग्मानि सन्ति ये सम्बन्धित-CSS-परिवारानाम् उत्पन्नं सुलभं कुर्वन्ति । वयं अस्माकं वर्णानाम्, ग्रिड् ब्रेकपॉइण्ट्, इत्यादीनां कृते Sass maps इत्यस्य उपयोगं कुर्मः । Sass चर इव सर्वेषु Sass मानचित्रेषु !defaultध्वजः समाविष्टः भवति तथा च अधिलिखितुं विस्तारयितुं च शक्यते ।

अस्माकं केचन Sass maps पूर्वनिर्धारितरूपेण रिक्तेषु विलीनाः भवन्ति । एतत् दत्तस्य सास् मानचित्रस्य सुलभविस्तारस्य अनुमतिं दातुं क्रियते, परन्तु निर्माणस्य व्ययेन आगच्छतिएतत् दत्तस्य Sass मानचित्रस्य सुलभविस्तारस्य अनुमतिं दातुं क्रियते, परन्तु मानचित्रात् वस्तूनि निष्कासयितुं किञ्चित् कठिनं

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

मानचित्रे सर्वे चराः $theme-colorsस्वतन्त्रचररूपेण परिभाषिताः सन्ति । अस्माकं मानचित्रे विद्यमानं वर्णं परिवर्तयितुं $theme-colors, स्वस्य कस्टम् Sass सञ्चिकायां निम्नलिखितम् योजयन्तु ।

$primary: #0074d9;
$danger: #ff4136;

पश्चात्, एते चराः Bootstrap इत्यस्य $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

आवश्यक कुञ्जी

Bootstrap Sass maps अन्तः केषाञ्चन विशिष्टानां कीलानां उपस्थितिं गृह्णाति यथा वयं स्वयमेव एतानि उपयुज्य विस्तारयामः । यथा भवन्तः समाविष्टनक्शान् अनुकूलितं कुर्वन्ति तथा तथा भवन्तः त्रुटयः सम्मुखीकुर्वन्ति यत्र विशिष्टस्य Sass मानचित्रस्य कुञ्जी उपयुज्यते ।

यथा, वयं primary, success, तथा च dangerकीलानि from इति उपयुञ्ज्महे$theme-colors लिङ्क्, बटन्, फार्म स्टेट्स् इत्येतयोः कृतेएतेषां कीलानां मूल्यानि प्रतिस्थापयित्वा कोऽपि समस्याः न उपस्थापनीयाः, परन्तु तान् निष्कासयितुं Sass संकलनसमस्याः उत्पद्यन्ते । एतेषु दृष्टान्तेषु, भवद्भिः तानि मूल्यानि उपयुज्यमानं Sass कोड् परिवर्तयितुं आवश्यकं भविष्यति ।

कार्याणि

वर्णाः

अस्माकं समीपे Sass maps इत्यस्य पार्श्वे theme colors इत्यस्य उपयोगः standalone variables इत्यस्य रूपेण अपि कर्तुं शक्यते, यथा $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));
}

व्यवहारे, भवान् फंक्शन् आह्वयित्वा color तथा weight पैरामीटर् मध्ये पास् करिष्यति ।

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

वर्ण विपरीतता

जालसामग्री-सुलभता-मार्गदर्शिका (WCAG) विपरीतता-आवश्यकतानां पूर्तये लेखकैः न्यूनतमं पाठ -रङ्ग-विपरीतता 4.5:1 न्यूनतमं गैर-पाठ-रङ्ग-विपरीतता च 3:1 प्रदातव्या , अत्यल्प-अपवादैः सह

अस्मिन् सहायार्थं वयं color-contrastBootstrap मध्ये फंक्शन् समावेशितवन्तः । इदं स्वयमेव प्रकाशं ( ), अन्धकारं ( ) अथवा कृष्णं (sRGB#fff#212529#000 ) विपरीतवर्णंइदं कार्यं विशेषतया mixins अथवा loops कृते उपयोगी भवति यत्र भवान् बहुवर्गान् जनयति ।

यथा, अस्माकं $theme-colorsमानचित्रात् वर्णस्य नमूनानि जनयितुं :

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

एकवारं विपरीतता आवश्यकतानां कृते अपि अस्य उपयोगः कर्तुं शक्यते:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

अस्माकं color map functions इत्यनेन अपि भवान् आधारवर्णं निर्दिष्टुं शक्नोति:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

SVG से पलायन करें

वयं SVG पृष्ठभूमिप्रतिमानां कृते , वर्णाः च पलायितुं escape-svgफंक्शन् इत्यस्य उपयोगं कुर्मः । प्रयोगे सति<>#escape-svg data URIs अवश्यमेव उद्धृतव्याः ।

Add एवं Subtract फंक्शन्स

वयं CSS फंक्शन् wrap कर्तुं addand functions इत्यस्य उपयोगं कुर्मः । एतेषां कार्याणां प्राथमिकं उद्देश्यं भवति यत् यदा “एककहीन” मूल्यं व्यञ्जने प्रसारितं भवति तदा दोषाणां परिहारः भवति । इत्यादीनि व्यञ्जनानि सर्वेषु ब्राउजर्-मध्ये त्रुटिं प्रत्यागमिष्यन्ति, गणितीयदृष्ट्या सम्यक् अस्ति चेदपि ।subtractcalc0calccalc(10px - 0)

उदाहरणं यत्र calc वैधम् अस्ति:

$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);
}

उदाहरणं यत्र calc असिद्धम् अस्ति :

$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/निर्देशिकायां एकः टनः mixins अस्ति यत् Bootstrap इत्यस्य भागान् शक्तिं ददाति तथा च स्वस्य परियोजनायां अपि उपयोक्तुं शक्यते ।

वर्ण योजनाएँ

मीडिया-प्रश्नस्य कृते आशुलिपि-मिक्सिन् , , तथा इष्ट-रङ्ग-योजनानां 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
  }
}