सस्स
अस्माकं स्रोत 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-color
and color
for 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 इत्यस्मिन् कस्यापि चरस्य कृते यथा आवश्यकं पुनरावृत्तिं कुर्वन्तु, यत्र अधः वैश्विकविकल्पाः सन्ति ।
मानचित्र एवं पाश
बूटस्ट्रैप् मध्ये 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 कर्तुं add
and functions इत्यस्य उपयोगं कुर्मः । एतेषां कार्याणां प्राथमिकं उद्देश्यं भवति यत् यदा “एककहीन” मूल्यं व्यञ्जने प्रसारितं भवति तदा दोषाणां परिहारः भवति । इत्यादीनि व्यञ्जनानि सर्वेषु ब्राउजर्-मध्ये त्रुटिं प्रत्यागमिष्यन्ति, गणितीयदृष्ट्या सम्यक् अस्ति चेदपि ।subtract
calc
0
calc
calc(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
समर्थनेन सह उपलभ्यते ।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
}
}