ساس

اسان جي ماخذ Sass فائلن کي استعمال ڪريو متغيرن، نقشن، ميڪسينز، ۽ افعال جو فائدو وٺڻ لاءِ توھان جي مدد ڪرڻ لاءِ توھان جي پروجيڪٽ کي تيزيءَ سان ٺاھڻ ۽ ڪسٽمائيز ڪرڻ ۾.

هن صفحي تي

اسان جو ذريعو استعمال ڪريو Sass فائلون متغيرن، نقشن، ميڪسينز، ۽ وڌيڪ مان فائدو وٺڻ لاء.

فائل جي جوڙجڪ

جڏهن به ممڪن هجي، بوٽ اسٽراپ جي بنيادي فائلن کي تبديل ڪرڻ کان پاسو ڪريو. ساس لاءِ، ان جو مطلب آهي توهان جي پنهنجي اسٽائل شيٽ ٺاهڻ جيڪا بوٽ اسٽريپ درآمد ڪري ٿي ته جيئن توهان ان کي تبديل ۽ وڌائي سگهو. فرض ڪيو ته توهان استعمال ڪري رهيا آهيو هڪ پيڪيج مئنيجر جهڙوڪ npm، توهان وٽ هوندو هڪ فائيل ڍانچي جيڪو هن جهڙو نظر اچي ٿو:

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

جيڪڏهن توهان اسان جون ماخذ فائلون ڊائون لوڊ ڪيون آهن ۽ پيڪيج مئنيجر استعمال نه ڪري رهيا آهيو، توهان چاهيو ٿا ته دستي طور تي ان ڍانچي سان ملندڙ جلندڙ ڪا شيءِ ٺاهي، بوٽ اسٽريپ جي ماخذ فائلن کي پنهنجي ذاتي کان الڳ رکو.

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

درآمد ڪرڻ

توھان ۾ custom.scss، توھان درآمد ڪندا Bootstrap جو ذريعو Sass فائلون. توھان وٽ ٻه اختيار آھن: شامل ڪريو سڀ بوٽ اسٽريپ، يا انھن حصن کي چونڊيو جيڪي توھان جي ضرورت آھي. اسان بعد ۾ حوصلا افزائي ڪريون ٿا، جيتوڻيڪ ڄاڻو ته اسان جي اجزاء ۾ ڪجهه گهربل ۽ انحصار آهن. توھان کي اسان جي پلگ ان لاءِ ڪجھ جاوا اسڪرپٽ پڻ شامل ڪرڻ جي ضرورت پوندي.

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

انهي سيٽ اپ سان گڏ، توهان شروع ڪري سگهو ٿا ڪنهن به Sass متغير ۽ نقشن کي توهان جي custom.scss. توھان پڻ شروع ڪري سگھوٿا بوٽ اسٽراپ جا حصا شامل ڪرڻ لاءِ // Optionalسيڪشن جي تحت ضرورت مطابق. اسان توهان جي شروعاتي نقطي طور اسان جي bootstrap.scssفائل مان مڪمل درآمد اسٽيڪ استعمال ڪرڻ جي صلاح ڏيو ٿا.

متغير ڊفالٽ

Bootstrap ۾ ھر Sass variable ۾ جھنڊو شامل آھي !defaultتوھان کي اجازت ڏئي ٿو توھان جي پنھنجي Sass ۾ متغير جي ڊفالٽ ويل کي اوور رائيڊ ڪرڻ جي بغير بوٽ اسٽريپ جي سورس ڪوڊ کي تبديل ڪرڻ جي. ڪاپي ۽ پيسٽ ڪريو متغيرات جي ضرورت مطابق، انهن جي قيمتن کي تبديل ڪريو، ۽ !defaultپرچم کي هٽايو. جيڪڏهن هڪ متغير اڳ ۾ ئي تفويض ڪيو ويو آهي، پوء اهو بوٽ اسٽراپ ۾ ڊفالٽ ويلز طرفان ٻيهر تفويض نه ڪيو ويندو.

توھان کي Bootstrap جي متغيرن جي مڪمل فهرست ملندي scss/_variables.scss. ڪجھ متغيرات تي مقرر ڪيا ويا آھن null، اھي متغير ملڪيت کي ٻاھر نه ڪڍندا آھن جيستائين اھي توھان جي ترتيب ۾ ختم نه ڪيا وڃن.

متغير اوور رائڊز اسان جي افعال کي درآمد ٿيڻ کان پوءِ اچڻ گهرجن، پر باقي وارداتن کان اڳ.

هتي هڪ مثال آهي جيڪو تبديل ڪري ٿو background-color۽ colorان لاءِ <body>جڏهن بوٽ اسٽريپ کي npm ذريعي درآمد ۽ مرتب ڪرڻ:

// 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 ذريعي بوٽ اسٽريپ سان شروع ڪريو! Twbs/bootstrap-npm-starter template repository ڏانھن وڃو اھو ڏسڻ لاءِ ته ڪيئن ٺاھيو ۽ ڪيئن ٺاھيو Bootstrap پنھنجي پنھنجي npm پروجيڪٽ ۾. شامل آهي ساس ڪمپلر، آٽوپريفڪسر، اسٽائلنٽ، پرج سي ايس ايس، ۽ بوٽ اسٽريپ آئڪن.

نقشا ۽ لوپ

بوٽ اسٽريپ ۾ شامل آھن ھٿ ڀري ساس نقشا، اھم قدر جوڙو جيڪي لاڳاپيل CSS جي خاندانن کي پيدا ڪرڻ آسان بڻائين ٿا. اسان استعمال ڪريون ٿا ساس نقشا اسان جي رنگن لاءِ، گرڊ بريڪ پوائنٽس، ۽ وڌيڪ. بس ساس متغير وانگر، سڀني ساس نقشن ۾ !defaultپرچم شامل آهي ۽ ختم ڪري سگھجي ٿو ۽ وڌايو وڃي ٿو.

اسان جا ڪجھ ساس نقشا ڊفالٽ طور خالي ٿيلن ۾ ضم ٿيل آھن. اهو ڪيو ويو آهي هڪ ڏنل ساس نقشي جي آسان توسيع جي اجازت ڏيڻ لاءِ، پر قيمت تي اچي ٿو هڪ نقشي مان شيون هٽائڻ کي ٿورو وڌيڪ ڏکيو.

نقشو تبديل ڪريو

نقشي ۾ سڀ variables $theme-colorsبيان ڪيل آهن اسٽينڊل variables طور. اسان جي $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

گهربل ڪنجيون

بوٽ اسٽريپ ساس نقشن ۾ ڪجهه مخصوص ڪنجين جي موجودگي کي فرض ڪري ٿو جيئن اسان استعمال ڪيو ۽ پاڻ کي وڌايو. جيئن ته توهان شامل ڪيل نقشن کي ترتيب ڏيو ٿا، توهان شايد غلطين کي منهن ڏئي سگهون ٿا جتي هڪ مخصوص Sass نقشي جي ڪنجي استعمال ڪئي پئي وڃي.

مثال طور، اسان استعمال ڪندا آهيون primary, success, and dangerkey from from $theme-colorslinks, buttons, and form states. انهن ڪنجين جي قدرن کي تبديل ڪرڻ سان ڪوبه مسئلو نه هجڻ گهرجي، پر انهن کي هٽائڻ سان ساس تاليف جا مسئلا ٿي سگهن ٿا. انهن مثالن ۾، توهان کي 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%);
}

رنگ برعڪس

Web Content Accessibility Guidelines (WCAG) جي برعڪس گهرجون پوريون ڪرڻ لاءِ ، ليکڪن کي لازمي طور تي 4.5:1 جو گهٽ ۾ گهٽ متن جو رنگ برعڪس مهيا ڪرڻ گهرجي ۽ 3:1 جو گهٽ ۾ گهٽ غير متن جي رنگ جو ابتڙ ، تمام ٿورن استثنان سان.

هن سان مدد ڪرڻ لاء، اسان color-contrastبوٽ اسٽراپ ۾ فنڪشن شامل ڪيو. اهو WCAG برعڪس تناسب الگورتھم استعمال ڪري ٿو برعڪس حد جي حساب سان حساب ڪرڻ لاءِ هڪ رنگ جي جاءِ ۾ لاڳاپو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`
}

توھان پڻ بيان ڪري سگھو ٿا بنيادي رنگ اسان جي رنگ نقشي جي ڪمن سان:

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

فرار SVG

اسان escape-svgفنڪشن استعمال ڪندا آهيون فرار ٿيڻ لاءِ <, >۽ #ڪردار SVG پس منظر جي تصويرن لاءِ. جڏهن escape-svgفنڪشن استعمال ڪندي، ڊيٽا URIs جو حوالو ڏنو وڃي.

شامل ڪريو ۽ ختم ڪريو افعال

اسان 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ميڊيا جي سوال لاءِ شارٽ هينڊ ميڪسين 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
  }
}