گۆڕاوەکانی CSS

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

هەموو تایبەتمەندییە تایبەتمەندەکانمان پێشگریان لەگەڵ دانراوەbs- بۆ ئەوەی ناکۆکی لەگەڵ CSSی لایەنی سێیەم دروست نەبێت.

گۆڕاوە ڕەگەکان

لێرەدا ئەو گۆڕاوانە دەخەینەڕوو کە ئێمە لەخۆیان دەگرین (تێبینی بکە کە :rootپێویستە) کە دەتوانرێت لە هەر شوێنێک کە CSS ی Bootstrap بار بکرێت دەستیان پێ بگات. ئەوان لە _root.scssفایلەکەماندا هەڵکەوتوون و لە فایلە dist کۆکراوەکانماندا جێگیرکراون.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

گۆڕاوە پێکهاتەکان

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

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

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

نموونە

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

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

خاڵەکانی شکاندنی تۆڕ

لە کاتێکدا ئێمە خاڵەکانی شکاندنی تۆڕەکەمان وەک گۆڕاوەی CSS دەخەینە ناوەوە (جگە لە xs)، ئاگاداربە کە گۆڕاوەکانی CSS لە پرسیارەکانی میدیادا کار ناکەن . ئەمە بە دیزاینە لە تایبەتمەندی CSS بۆ گۆڕاوەکان، بەڵام لەوانەیە لە ساڵانی داهاتوودا بگۆڕێت بە پشتگیری env()گۆڕاوەکان. سەیری ئەم وەڵامەی Stack Overflow بکە بۆ چەند لینکی یارمەتیدەر. لەم نێوەندەدا دەتوانیت ئەم گۆڕاوانە لە بارودۆخەکانی تری CSS بەکاربهێنیت، هەروەها لە جاڤاسکڕێپتەکەتدا.