सास

तपाइँलाई छिटो निर्माण गर्न र तपाइँको परियोजनालाई अनुकूलित गर्न मद्दतको लागि चर, नक्सा, मिक्सिन, र प्रकार्यहरूको फाइदा लिन हाम्रो स्रोत Sass फाइलहरू प्रयोग गर्नुहोस्।

यस पृष्ठमा

चर, नक्सा, मिक्सिन, र थपको फाइदा लिन हाम्रो स्रोत सास फाइलहरू प्रयोग गर्नुहोस्।

फाइल संरचना

सम्भव भएसम्म, बुटस्ट्र्यापको मूल फाइलहरू परिमार्जन गर्नबाट जोगिनुहोस्। Sass को लागी, यसको मतलब तपाईको आफ्नै स्टाइलसिट सिर्जना गर्नु हो जसले बुटस्ट्र्याप आयात गर्दछ ताकि तपाई यसलाई परिमार्जन गर्न र विस्तार गर्न सक्नुहुनेछ। तपाईंले npm जस्तै प्याकेज प्रबन्धक प्रयोग गरिरहनुभएको छ भनी मान्नुहोस्, तपाईंसँग फाइल संरचना यस्तो देखिन्छ:

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

यदि तपाईंले हाम्रा स्रोत फाइलहरू डाउनलोड गर्नुभएको छ र प्याकेज प्रबन्धक प्रयोग गरिरहनुभएको छैन भने, तपाईंले बुटस्ट्र्यापको स्रोत फाइलहरूलाई आफ्नैबाट अलग राखेर म्यानुअल रूपमा त्यो संरचनासँग मिल्दोजुल्दो सेटअप गर्न चाहनुहुन्छ।

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

आयात गर्दै

तपाईको custom.scssमा, तपाईले बुटस्ट्र्यापको स्रोत सास फाइलहरू आयात गर्नुहुनेछ। तपाईंसँग दुईवटा विकल्पहरू छन्: सबै बुटस्ट्र्याप समावेश गर्नुहोस्, वा तपाईंलाई आवश्यक पर्ने भागहरू छान्नुहोस्। हामी पछिल्लोलाई प्रोत्साहन गर्छौं, यद्यपि त्यहाँ हाम्रा कम्पोनेन्टहरूमा केही आवश्यकताहरू र निर्भरताहरू छन् भनेर सचेत रहनुहोस्। तपाईंले हाम्रो प्लगइनहरूको लागि केही 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";
@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

त्यो सेटअपको साथमा, तपाइँ तपाइँको 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/mixins";

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

बुटस्ट्र्यापमा कुनै पनि चरको लागि आवश्यक रूपमा दोहोर्याउनुहोस्, तलका विश्वव्यापी विकल्पहरू सहित।

हाम्रो स्टार्टर प्रोजेक्टको साथ npm मार्फत बुटस्ट्र्यापको साथ सुरू गर्नुहोस्! twbs /bootstrap-npm-starter टेम्प्लेट रिपोजिटरीमा जानुहोस् तपाईंको आफ्नै npm प्रोजेक्टमा बुटस्ट्र्याप कसरी बनाउने र अनुकूलन गर्ने भनेर हेर्न। Sass कम्पाइलर, Autoprefixer, Stylelint, PurgeCSS, र बुटस्ट्र्याप आइकनहरू समावेश गर्दछ।

नक्सा र लूपहरू

बुटस्ट्र्यापले मुट्ठीभर सास नक्साहरू, मुख्य मान जोडीहरू समावेश गर्दछ जसले सम्बन्धित CSS को परिवारहरू उत्पन्न गर्न सजिलो बनाउँदछ। हामी हाम्रा रंगहरू, ग्रिड ब्रेकपोइन्टहरू, र थपका लागि सास नक्साहरू प्रयोग गर्छौं। 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";

$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

आवश्यक कुञ्जीहरू

बुटस्ट्र्यापले सास नक्सा भित्र केहि विशिष्ट कुञ्जीहरूको उपस्थितिलाई मान्दछ जुन हामीले प्रयोग गर्यौं र यसलाई विस्तार गर्यौं। तपाईंले समावेश गरिएका नक्साहरूलाई अनुकूलन गर्दा, तपाईंले त्रुटिहरू सामना गर्न सक्नुहुन्छ जहाँ एउटा विशेष सास नक्साको कुञ्जी प्रयोग भइरहेको छ।

उदाहरणका लागि, हामी लिङ्कहरू, बटनहरू, र फारम अवस्थाहरूका लागि 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 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`
}

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