گۆڕاوەکانی 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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

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

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

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

هەرکاتێک کە بتوانین، ئێمە گۆڕاوەکانی CSS لە ئاستی پێکهاتەی بنەڕەتیدا دیاری دەکەین (بۆ نموونە، .navbarبۆ navbar و پێکهاتە لاوەکییەکانی). ئەمەش پێشبینیکردن لە کوێ و چۆنێتی خۆکارکردن کەمدەکاتەوە، و ڕێگە بە دەستکاریکردنی ئاسان دەدات لەلایەن تیمەکەمانەوە لە نوێکارییەکانی داهاتوودا.

پێشگر

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

پێشگرەکە لە ڕێگەی $prefixگۆڕاوەی Sass ەوە خۆکارانە بکە. بە شێوەیەكی بنەڕەتی، لەسەر bs-(تێبینی داشەكەی دواوە) دانراوە.

نموونە

گۆڕاوەکانی 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 بەکاربهێنیت، هەروەها لە جاڤاسکڕێپتەکەتدا.