ساس
سوود لە فایلە سەرچاوەییەکانی 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/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
. هەروەها دەتوانیت دەست بکەیت بە زیادکردنی بەشەکانی 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/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ی پەیوەندیدار ئاسانتر دەکات. ئێمە نەخشەی ساس بەکاردەهێنین بۆ ڕەنگەکانمان و خاڵەکانی شکاندنی تۆڕ و زۆر شتی تر. هەروەک گۆڕاوەکانی ساس، هەموو نەخشەکانی ساس !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
. ئاگاداربە دەبێت لە نێوان پێداویستی و بژاردەکانماندا بیخەیتە ناوەوە:
// 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 بەکاردەهێنرێت.
بۆ نموونە ئێمە کلیلەکانی primary
, success
, و danger
from بەکاردەهێنین $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 2.0 بۆ کۆنتراستی ڕەنگەکان بەدی بهێنن ، نووسەران دەبێ ڕێژەی کۆنتراست بەلایەنی کەمەوە 4.5:1 دابین بکەن، بە زۆر کەم جگە لەوان.
فەنکشنێکی زیادە کە لە Bootstrap دا دەیخەینە ڕوو بریتییە لە فەنکشنی کۆنتراستی ڕەنگەکان، 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`
}
هەڵهاتن لە 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
}
}