सस्स

अस्माकं स्रोत 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. 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, एते चराः गुणं न निर्गच्छन्ति यावत् ते भवतः विन्यासे अधिलिखिताः न भवन्ति ।

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

अत्र एकं उदाहरणं यत् 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/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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। अस्माकं आवश्यकतानां विकल्पानां च मध्ये भवन्तः अवश्यमेव सम्मिलितं कुर्वन्तु इति अवगच्छन्तु:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

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

यथा, वयं लिङ्क्, बटन्, फार्म स्टेट्स् इत्येतयोः कृते primary, success, तथा च dangerकीलानि उपयुञ्ज्महे । $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 2.0 सुलभतामानकान् पूरयितुं लेखकैः न्यूनातिन्यूनं 4.5:1 विपरीततानुपातं प्रदातव्यं , अत्यल्पान् अपवादैः सह

Bootstrap मध्ये वयं समाविष्टं अतिरिक्तं कार्यं वर्णविपरीतकार्यम् अस्ति, color-contrast. इदं निर्दिष्टस्य आधारवर्णस्य आधारेण स्वयमेव प्रकाशं ( ), अन्धकारं ( ) अथवा कृष्णं ( ) विपरीतवर्णं प्रत्यागन्तुं कलरस्पेस् मध्ये सापेक्षप्रकाशस्य आधारेण विपरीतता-दहलीजस्य गणनायै WCAG 2.0 एल्गोरिदम् इत्यस्य उपयोगं करोति इदं कार्यं विशेषतया mixins अथवा loops कृते उपयोगी भवति यत्र भवान् बहुवर्गान् जनयति ।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`
}

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

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

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

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

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