ساس

سوود لە فایلە سەرچاوەییەکانی Sass وەربگرە بۆ ئەوەی سوود لە گۆڕاوەکان، نەخشەکان، میکسینەکان و فەنکشنەکان وەربگریت بۆ ئەوەی یارمەتیت بدات خێراتر دروست بکەیت و پڕۆژەکەت بەپێی خواستی خۆت دروست بکەیت.

لەم پەیجەدا

سوود لە فایلە سەرچاوەییەکانی Sass وەربگرە بۆ سوودوەرگرتن لە گۆڕاوەکان، نەخشەکان، میکسینەکان و زۆر شتی تر.

پێکهاتەی فایلەکان

هەرکاتێک دەتوانیت، خۆت بەدوور بگرە لە دەستکاریکردنی فایلە ناوەکییەکانی Bootstrap. بۆ ساس، ئەوە واتە دروستکردنی ستایلشیتی تایبەت بە خۆت کە Bootstrap هاوردە دەکات بۆ ئەوەی بتوانیت دەستکاری بکەیت و درێژی بکەیتەوە. بەگریمانەیەک کە تۆ بەڕێوەبەری پاکێجێکی وەک npm بەکاردەهێنیت، پێکهاتەی پەڕگەیەکت دەبێت کە بەم شێوەیە دەبێت:

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

ئەگەر فایلە سەرچاوەییەکانمان دابەزاندووە و بەڕێوەبەری پاکێج بەکارناهێنیت، ئەوا دەتەوێت بە دەستی شتێکی هاوشێوەی ئەو پێکهاتەیە دروست بکەیت، فایلە سەرچاوەییەکانی Bootstrap بە جیا لە فایلە سەرچاوەییەکانی خۆت بهێڵیتەوە.

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

هاوردەکردن

لە custom.scss, تۆ فایلە سەرچاوەییەکانی Sass ی Bootstrap هاوردە دەکەیت. دوو بژاردەت هەیە: هەموو 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

بەو ڕێکخستنە لە شوێنی خۆیدا، دەتوانیت دەست بکەیت بە دەستکاریکردنی هەریەکێک لە گۆڕاو و نەخشەکانی Sass لە custom.scss. هەروەها دەتوانیت دەست بکەیت بە زیادکردنی بەشەکانی Bootstrap لە ژێر // Optionalبەشەکە بەپێی پێویست. پێشنیار دەکەین کە ستاکی هاوردەکردنی تەواو لە bootstrap.scssفایلەکەمانەوە وەک خاڵی دەستپێک بەکاربهێنیت.

پێشوەختە گۆڕاوەکان

هەموو گۆڕاوێکی Sass لە Bootstrap !defaultئاڵاکە لەخۆدەگرێت کە ڕێگەت پێدەدات بەهای پێشوەختەی گۆڕاوەکە لە Sass ی خۆتدا جێبەجێ بکەیت بەبێ دەستکاریکردنی کۆدی سەرچاوەی Bootstrap. بەپێی پێویست گۆڕاوەکان کۆپی بکە و لێیان بدە، بەهاکانیان دەستکاری بکە و !defaultئاڵاکە لابەرە. ئەگەر گۆڕاوێک پێشتر دیاری کراوە، ئەوا بە بەها پێشوەختەکانی Bootstrap دووبارە تەرخان ناکرێتەوە.

لیستی تەواوی گۆڕاوەکانی Bootstrap لە scss/_variables.scss. هەندێک گۆڕاو لەسەر , دانراون null، ئەم گۆڕاوانە تایبەتمەندییەکە دەرناچن مەگەر لە ڕێکخستنەکەتدا سەرپێچی نەکرێت.

سەرپێچی گۆڕاو دەبێت دوای هاوردەکردنی فەنکشنەکانمان بێت، بەڵام پێش باقی هاوردەکردنەکان.

لێرەدا نموونەیەک دەخەینەڕوو کە background-colorو colorبۆ لە <body>کاتی هاوردەکردن و کۆکردنەوەی Bootstrap لە ڕێگەی 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 دووبارەی بکەرەوە، لەوانەش هەڵبژاردە جیهانییەکانی خوارەوە.

دەست بکە بە Bootstrap لە ڕێگەی npm لەگەڵ پڕۆژەی دەستپێکەکەمان! سەردانی کۆگای قاڵبی twbs/bootstrap-npm-starter بکە بۆ ئەوەی بزانیت چۆن Bootstrap لە پرۆژەی npm ی خۆتدا دروست بکەیت و خۆکارانە بکەیت. کۆمپایەری Sass و Autoprefixer و Stylelint و PurgeCSS و Bootstrap Icons لەخۆدەگرێت.

نەخشە و لوپەکان

بووتستراپ مشتێک نەخشەی Sass لەخۆدەگرێت، جووتە بەهای سەرەکی کە دروستکردنی خێزانەکانی CSSی پەیوەندیدار ئاسانتر دەکات. ئێمە نەخشەی ساس بەکاردەهێنین بۆ ڕەنگەکانمان و خاڵەکانی شکاندنی تۆڕ و زۆر شتی تر. هەروەک گۆڕاوەکانی ساس، هەموو نەخشەکانی ساس !defaultئاڵاکەیان تێدایە و دەتوانرێت سەرپێچی بکرێت و درێژ بکرێتەوە.

هەندێک لە نەخشەکانی ساسمان بە شێوەی دیفۆڵت تێکەڵ دەکرێن بۆ بەتاڵ. ئەمەش بۆ ئەوەیە کە ڕێگە بدات بە فراوانکردنی ئاسانی نەخشەیەکی دیاریکراوی ساس، بەڵام بە تێچووی لابردنی شتەکان لە نەخشەیەکدا کەمێک قورستر دەکات.

دەستکاری نەخشە بکە

هەموو گۆڕاوەکانی ناو $theme-colorsنەخشەکە وەک گۆڕاوە سەربەخۆکان پێناسە کراون. بۆ دەستکاریکردنی ڕەنگێکی هەبوو لە $theme-colorsنەخشەکەماندا، ئەمانەی خوارەوە زیاد بکە بۆ فایلە تایبەتەکەی ساسەکەت:

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

دواتر ئەم گۆڕاوانە لە $theme-colorsنەخشەی Bootstrap دا دادەنرێت:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

زیادکردن بۆ نەخشە

ڕەنگی نوێ زیاد بکە بۆ $theme-colors, یان هەر نەخشەیەکی تر، بە دروستکردنی نەخشەیەکی نوێی ساس بە بەها تایبەتەکانت و تێکەڵکردنی لەگەڵ نەخشەی ئەسڵی. لەم حاڵەتەدا $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 بەکاردەهێنرێت.

بۆ نموونە ئێمە کلیلەکانی primary, success, و dangerfrom بەکاردەهێنین $theme-colorsبۆ بەستەرەکان و دوگمەکان و دۆخی فۆڕمەکان. گۆڕینی بەهاکانی ئەم کلیلانە نابێت هیچ کێشەیەک پێشکەش بکات، بەڵام لابردنی لەوانەیە ببێتە هۆی کێشەی کۆکردنەوەی ساس. لەم حاڵەتانەدا پێویستە دەستکاری کۆدی Sass بکەیت کە سوود لەو بەهایانە وەردەگرێت.

ئەرکەکان

ڕەنگەکان

لە تەنیشت ئەو نەخشانەی ساس کە هەمانە، دەتوانرێت ڕەنگەکانی تەوەر وەک گۆڕاوە سەربەخۆکان بەکاربهێنرێت، وەک $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

دەتوانیت بە Bootstrap's 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) بەدی بهێنن، نووسەران دەبێ کەمترین کۆنتراستی ڕەنگی دەق بە 4.5:1 و کەمترین کۆنتراستی ڕەنگی نادەق 3:1 دابین بکەن، بە زۆر کەم جگە لەوەی.

بۆ یارمەتیدان لەم کارە، ئێمە color-contrastفەنکشنەکەمان لە Bootstrap دانا. ئەلگۆریتمەکەی ڕێژەی کۆنتراستی WCAG بەکاردەهێنێت بۆ حیسابی ئاستەکانی کۆنتراست لەسەر بنەمای ڕووناکی ڕێژەیی لە 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`
}

هەڵهاتن لە SVG

ئێمە escape-svgفەنکشنەکە بەکاردەهێنین بۆ دەربازبوون لە <, >و #پیتەکان بۆ وێنەکانی پاشبنەمای SVG. لە کاتی بەکارهێنانی escape-svgفەنکشنەکەدا، دەبێت URI ی داتاکان وەربگیرێت.

فەنکشنەکانی زیادکردن و کەمکردنەوە

ئێمە فەنکشنەکانی addو subtractبەکاردەهێنین بۆ پێچانی calcفەنکشنی CSS. ئامانجی سەرەکی ئەم ئەرکانە ئەوەیە کە هەڵە نەبێت کاتێک 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/تێدایە کە هێز دەدات بە بەشەکانی 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
  }
}