Source

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

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

پێشەکی

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

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

ساس

سوود لە فایلە سەرچاوەییەکانی 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

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@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 4 !defaultئاڵاکە لەخۆدەگرێت کە ڕێگەت پێدەدات بەهای پێشوەختەی گۆڕاوەکە لە Sass ی خۆتدا جێبەجێ بکەیت بەبێ دەستکاریکردنی کۆدی سەرچاوەی Bootstrap. بەپێی پێویست گۆڕاوەکان کۆپی بکە و لێیان بدە، بەهاکانیان دەستکاری بکە و !defaultئاڵاکە لابەرە. ئەگەر گۆڕاوێک پێشتر دیاری کراوە، ئەوا بە بەها پێشوەختەکانی Bootstrap دووبارە تەرخان ناکرێتەوە.

لیستی تەواوی گۆڕاوەکانی Bootstrap لە scss/_variables.scss.

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

لێرەدا نموونەیەک دەخەینەڕوو کە background-colorو colorبۆ لە <body>کاتی هاوردەکردن و کۆکردنەوەی Bootstrap لە ڕێگەی npm دەگۆڕێت:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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

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

بووتستراپ ٤ مشتێک نەخشەی 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`
}

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

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لەسەر پێکهاتە جیاوازەکان چالاک دەکات.
$enable-gradients trueیان false(بەپێی پێشوەختە) گرادێنتەکانی پێشوەختە پێناسەکراو لە ڕێگەی background-imageستایلەکانەوە لەسەر پێکهاتە جیاوازەکان چالاک دەکات.
$enable-transitions true(بەپێی پێشوەختە) یانfalse s پێشوەختە پێناسەکراوەکان transitionلەسەر پێکهاتە جیاوازەکان چالاک دەکات.
$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-print-styles true(بەپێی پێشوەختە) یانfalse ستایلەکان بۆ باشکردنی چاپکردن چالاک دەکات.

ڕەنگ

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

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

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

شین
ئیندیگۆ
مۆر
پەمەیی
سوور
نارنجی
زەرد
سەوز
تیل
سیان

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

// 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فایلە Bootstraps بەردەستە.

سەرەکی
لاوەکی
سەرکەوتن
مەترسی
ئاگادار کردنەوە
زانیاری
ڕووناکی
تاریک

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

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

100
200
300
400
500
600
700
800
900

لەناو 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}