in English

تەوەرەی بووتستراپ

Bootstrap 4 بە گۆڕاوە نوێیەکانی Sass ی ناوەکیمان تایبەتمەند بکە بۆ هەڵبژاردەکانی ستایلە جیهانییەکان بۆ گۆڕینی ئاسان لە تەوەر و پێکهاتەکان.

پێشەکی

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

ئێستا، تەوەرکردن بە گۆڕاوە ساسەکان و نەخشەکانی ساس و CSSی تایبەت بەدی دێت. هیچ ستایلی تەوەرێکی تایبەتتر نییە؛ لەبری ئەوە دەتوانیت تەوەرەی ناوەکی چالاک بکەیت بۆ زیادکردنی گرادێنت و سێبەر و زۆر شتی تر.

ساس

سوود لە فایلە سەرچاوەییەکانی 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

بەو ڕێکخستنە لە شوێنی خۆیدا، دەتوانیت دەست بکەیت بە دەستکاریکردنی هەریەکێک لە گۆڕاو و نەخشەکانی 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 دەگۆڕێت:

@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 دووبارەی بکەرەوە، لەوانەش هەڵبژاردە جیهانییەکانی خوارەوە.

دەست بکە بە 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، کلیل و بەهای نوێ زیاد بکە:

$theme-colors: (
  "custom-color": #900
);

لە نەخشە دەربهێنە

بۆ لابردنی ڕەنگەکان لە $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";
...

کلیلی پێویست

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

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

ئەرکەکان

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

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

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

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

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

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

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

.custom-element {
  color: theme-color-level(primary, -10);
}

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

کۆنتراستی ڕەنگەکان

فەنکشنێکی زیادە کە لە Bootstrap دا دەیخەینە ڕوو بریتییە لە فەنکشنی کۆنتراستی ڕەنگەکان، color-yiq. فەزای ڕەنگی YIQ بەکاردەهێنێت بۆ گەڕانەوەی ئۆتۆماتیکی ڕەنگێکی کۆنتراستی ڕووناکی ( #fff) یان تاریک ( #111) بە پشتبەستن بە ڕەنگی بنەڕەتی دیاریکراو. ئەم فەنکشنە بە تایبەتی بۆ میکسینەکان یان لوپەکان بەسوودە کە چەندین پۆل دروست دەکەیت.

بۆ نموونە بۆ دروستکردنی سواتچی ڕەنگەکان لە $theme-colorsنەخشەکەمانەوە:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

هەروەها دەتوانرێت بۆ پێداویستییەکانی کۆنتراستی یەکجارەکی بەکاربهێنرێت:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

هەروەها دەتوانیت ڕەنگێکی بنەڕەتی دیاری بکەیت بە فەنکشنەکانی نەخشەی ڕەنگەکانمان:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

هەڵهاتن لە SVG

ئێمە escape-svgفەنکشنەکە بەکاردەهێنین بۆ دەربازبوون لە <, >و #پیتەکان بۆ وێنەکانی پاشبنەمای SVG. ئەم کاراکتەرانە پێویستیان بە هەڵهاتن هەیە بۆ ئەوەی وێنەکانی پاشبنەما لە IE بە باشی ڕەندەر بکەن. لە کاتی بەکارهێنانی 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);
}

بژاردەکانی ساس

Bootstrap 4 بە فایلە گۆڕاوە تایبەتمەندە ناوەکییەکانمان خۆکارانە بکە و بە ئاسانی هەڵبژاردەکانی CSS جیهانی بە $enable-*گۆڕاوە نوێیەکانی Sass بگۆڕە. بەهای گۆڕاوێک سەرپێچی بکە و npm run testبەپێی پێویست لەگەڵیدا دووبارە کۆبکەرەوە.

دەتوانیت ئەم گۆڕاوانە بۆ هەڵبژاردە جیهانییە سەرەکییەکان لە scss/_variables.scssپەڕگەی Bootstrapدا بدۆزیتەوە و بەپێی خواستی خۆت دروستی بکەیت.

گۆڕاو بەهاکان وەسف
$spacer 1rem(بەپێی پێشوەختە)، یان هەر بەهایەک > 0 بەهای فەواصلی پێشوەختە دیاری دەکات بۆ دروستکردنی بە شێوەیەکی بەرنامەیی سوودمەندییەکانی فەواصلمان .
$enable-rounded true(بەپێی پێشوەختە) یانfalse ستایلە پێشوەختە پێناسەکراوەکان border-radiusلەسەر پێکهاتە جیاوازەکان چالاک دەکات.
$enable-shadows trueیان false(بەپێی پێشوەختە) شێوازی دیکۆراتی پێشوەختە دیاریکراو box-shadowلەسەر پێکهاتە جیاوازەکان چالاک دەکات. کاریگەری لەسەر ئەو شتانە نییە box-shadowکە بۆ حاڵەتەکانی فۆکەس بەکاردەهێنرێن.
$enable-gradients trueیان false(بەپێی پێشوەختە) گرادێنتەکانی پێشوەختە پێناسەکراو لە ڕێگەی background-imageستایلەکانەوە لەسەر پێکهاتە جیاوازەکان چالاک دەکات.
$enable-transitions true(بەپێی پێشوەختە) یانfalse s پێشوەختە پێناسەکراوەکان transitionلەسەر پێکهاتە جیاوازەکان چالاک دەکات.
$enable-prefers-reduced-motion-media-query true(بەپێی پێشوەختە) یانfalse prefers-reduced-motionپرسیاری میدیا چالاک دەکات ، کە هەندێک ئەنیمەیشن/گواستنەوە سەرکوت دەکات بە پشتبەستن بە هەڵبژاردەکانی وێبگەڕ/سیستەمی کارپێکردنی بەکارهێنەران.
$enable-hover-media-query trueیان false(بەپێی پێشوەختە) بەکارنەهاتووە
$enable-grid-classes true(بەپێی پێشوەختە) یانfalse دروستکردنی پۆلەکانی CSS بۆ سیستەمی تۆڕەکە چالاک دەکات (بۆ نموونە، .container, .row, .col-md-1, هتد).
$enable-caret true(بەپێی پێشوەختە) یانfalse چالاککردنی توخمە ساختەکان caret لەسەر .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(بەپێی پێشوەختە) یانfalse زیادکردنی ئاماژەدەری “دەست” بۆ توخمەکانی دوگمەی لەکارنەکراو.
$enable-print-styles true(بەپێی پێشوەختە) یانfalse ستایلەکان بۆ باشکردنی چاپکردن چالاک دەکات.
$enable-responsive-font-sizes trueیان false(بەپێی پێشوەختە) قەبارەی فۆنتەکانی وەڵامدەرەوە چالاک دەکات .
$enable-validation-icons true(بەپێی پێشوەختە) یانfalse background-imageئایکۆنەکان لە ناو هاتنەژوورەوەی دەقی و هەندێک فۆڕمی تایبەتمەند بۆ دۆخی چەسپاندن چالاک دەکات .
$enable-deprecation-messages true(بەپێی پێشوەختە) یانfalse بۆ falseشاردنەوەی ئاگادارکردنەوەکان لە کاتی بەکارهێنانی هەریەکێک لە میکسین و فەنکشنەکانی بەکارنەهاتوو کە پلانی بۆ دانراوە لە v5.

ڕەنگ

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

هەموو ڕەنگەکان

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

$شین #007bff
$indigo #6610f2
$وەنەوشەیی #6f42c1
$پەمەیی #e83e8c
$سوور #dc3545
$نارنجی #fd7e14
$زەرد #ffc107
$سەوز #28a745
$teal #20c997
$سیان #17a2b8

لێرەدا چۆن دەتوانیت ئەمانە لە ساسەکەتدا بەکاربهێنیت:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

هەروەها پۆلەکانی سوودمەندی ڕەنگ بەردەستە بۆ ڕێکخستن colorو background-color.

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

ڕەنگەکانی تەوەر

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

$سەرەکی #007bff
$لاوەکی #6c757d
$سەرکەوتن #28a745
$مەترسی #dc3545
$ئاگادارکردنەوە #ffc107
$زانیاری #17a2b8
$ڕووناکی #f8f9fa
$تاریک #343a40

خۆڵەمێشیەکان

کۆمەڵەیەکی فراوانی گۆڕاوە خۆڵەمێشیەکان و نەخشەیەکی ساس لە scss/_variables.scssبۆ سێبەری خۆڵەمێشی یەکگرتوو لە سەرانسەری پڕۆژەکەتدا. سەرنج بدەن کە ئەمانە "خۆڵەمێشی فێنک"ن، کە مەیلیان بەرەو تۆنێکی شین و ورد هەیە، نەک خۆڵەمێشی بێلایەن.

$ خۆڵەمێشی-100 #f8f9fa
$ خۆڵەمێشی-200 #e9ecef
$ خۆڵەمێشی-300 #dee2e6
$ خۆڵەمێشی-400 #ced4da
$ خۆڵەمێشی-500 #adb5bd
$ خۆڵەمێشی-600 #6c757d
$ خۆڵەمێشی-700 #495057
$ خۆڵەمێشی-800 #343a40
$ خۆڵەمێشی-900 #212529

لەناو scss/_variables.scss, گۆڕاوە ڕەنگەکانی Bootstrap و نەخشەی Sass دەبینیتەوە. لێرەدا نموونەیەک لە $colorsنەخشەی ساس دەخەینەڕوو:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

زیادکردن، لابردنی، یان دەستکاریکردنی بەهاکان لەناو نەخشەکەدا بۆ نوێکردنەوەی چۆنیەتی بەکارهێنانیان لە زۆرێک لە پێکهاتەکانی تردا. بەداخەوە لەم کاتەدا هەموو پێکهاتەیەک ئەم نەخشەیەی ساس کەڵک ناگرێت. نوێکارییەکانی داهاتوو هەوڵ دەدەن بۆ باشترکردنی ئەم بابەتە. تا ئەو کاتە پلان دابنێ بۆ بەکارهێنانی ${color}گۆڕاوەکان و ئەم نەخشەیەی ساس.

پێکهاتەکان

زۆرێک لە پێکهاتەکان و سوودمەندییەکانی Bootstrap بە @eachلوپ دروستکراون کە لەسەر نەخشەی Sass دووبارە دەبنەوە. ئەمە بە تایبەتی یارمەتیدەرە بۆ دروستکردنی جۆرەکانی پێکهاتەیەک لەلایەن ئێمە $theme-colorsو دروستکردنی جۆرە وەڵامدەرەوەکان بۆ هەر خاڵێکی شکاندن. لەگەڵ خۆکارکردنی ئەم نەخشانەی ساس و دووبارە کۆمپایکردنەوە، بە شێوەیەکی ئۆتۆماتیکی گۆڕانکارییەکانت دەبینیت کە لەم لوپانەدا ڕەنگ دەدەنەوە.

دەستکاریکەرەکان

زۆرێک لە پێکهاتەکانی Bootstrap بە رێبازی پۆلی بنەڕەتی-دەستکاریکەر دروستکراون. ئەمەش واتە بەشێکی زۆری ستایلەکە لە پۆلێکی بنەڕەتیدا لەخۆدەگرێت (بۆ نموونە، .btn) لە کاتێکدا گۆڕانکارییەکانی ستایلەکە لە پۆلەکانی دەستکاریکەردا قەتیس کراون (بۆ نموونە، .btn-danger). ئەم پۆلە دەستکاریکەرانە لە $theme-colorsنەخشەکەوە دروست دەکرێن بۆ ئەوەی ژمارە و ناوی پۆلەکانی دەستکاریکەرەکانمان بەپێی خواستی خۆت دروست بکرێت.

لێرەدا دوو نموونە دەخەینەڕوو کە چۆن بەسەر $theme-colorsنەخشەکەدا لوپ دەکەین بۆ دروستکردنی دەستکاریکەر بۆ .alertپێکهاتەکە و هەموو .bg-*سوودمەندییەکانی پاشبنەمامان.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

وەڵامدەرەوە

ئەم لوپانەی ساس تەنها لە نەخشەی ڕەنگاوڕەنگدا سنووردار نین، هەروەها. هەروەها دەتوانیت گۆڕانکاری وەڵامدەرەوەی پێکهاتەکانت یان سوودمەندەکانت دروست بکەیت. بۆ نموونە سوودمەندییەکانی ڕێکخستنی دەقی وەڵامدەرەوەمان وەربگرە کە ئێمە @eachلوپێک بۆ $grid-breakpointsنەخشەی ساس لەگەڵ پرسیارێکی میدیا تێکەڵ دەکەین.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

ئەگەر پێویستت بە دەستکاریکردنی $grid-breakpoints, گۆڕانکارییەکانت بۆ هەموو ئەو لوپانە دەگونجێت کە لەسەر ئەو نەخشەیە دووبارە دەبنەوە.

گۆڕاوەکانی CSS

بووتستراپ ٤ نزیکەی دوو دەیان تایبەتمەندی تایبەتمەندی CSS (گۆڕاوەکان) لە CSS کۆکراوەی خۆیدا لەخۆدەگرێت. ئەمانە دەستڕاگەیشتنێکی ئاسان بە بەها بەکارهێنراوەکانی باو وەک ڕەنگەکانی تەوەرەکانمان، خاڵەکانی شکاندن و ستاکەکانی فۆنتە سەرەتاییەکان دابین دەکەن لەکاتی کارکردن لە پشکنەری وێبگەڕەکەت، سندوقی کۆد، یان نموونەسازی گشتی.

گۆڕاوە بەردەستەکان

لێرەدا ئەو گۆڕاوانە دەخەینەڕوو کە ئێمە لەخۆیان دەگرین (تێبینی بکە کە the :rootis required). ئەوان لە _root.scssفایلەکەماندا جێگیرن.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

نموونە

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

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

گۆڕاوەکانی خاڵی شکاندن

لە کاتێکدا ئێمە لە سەرەتادا خاڵەکانی شکاندنمان لە گۆڕاوەکانی CSS ی خۆماندا جێگیر کردبوو (بۆ نموونە، --breakpoint-md)، ئەمانە لە پرسیارەکانی میدیادا پشتگیری ناکرێت ، بەڵام هێشتا دەتوانرێت لەناو کۆمەڵە یاساکان لە پرسیارەکانی میدیادا بەکاربهێنرێن. ئەم گۆڕاوانەی خاڵی شکاندن لە CSS ی کۆکراوەدا دەمێننەوە بۆ گونجانی پاشەکشە بەو پێیەی دەتوانرێت لەلایەن جاڤاسکڕێپتەوە بەکاربهێنرێن. زیاتر بزانە لە spec .

لێرەدا نموونەیەک دەخەینەڕوو کە پشتگیری ناکرێت:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

وە لێرەدا نموونەیەک دەخەینەڕوو کە پشتگیری دەکرێت:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}