گۆڕاوەکانی CSS

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

هەموو تایبەتمەندییە تایبەتمەندەکانمان پێشگریان لەگەڵ دانراوە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-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --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));
}

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

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

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

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

نموونە

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

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