CSS ئۆزگەرگۈچى مىقدار

Bootstrap تۈزۈلگەن CSS دىكى 20 نەچچە CSS خاسلىقى (ئۆزگەرگۈچى مىقدار) نى ئۆز ئىچىگە ئالىدۇ ، ھەر بىر زاپچاس ئاساسىدا خاسلاشتۇرۇشنى ياخشىلاش يولىدا يەنە ئون نەچچە خىل بار. بۇلار تور كۆرگۈچىڭىزنىڭ تەكشۈرگۈچىسى ، كود ساندۇقى ياكى ئادەتتىكى ئەسلى تىپتا ئىشلىگەندە باشتېمىمىزنىڭ رەڭگى ، بۆسۈش ئېغىزى ۋە دەسلەپكى خەت ساندۇقى قاتارلىق كۆپ ئىشلىتىلىدىغان قىممەتلەرنى ئاسان زىيارەت قىلالايدۇ.

بىزنىڭ بارلىق خاسلىقىمىزbs- ئۈچىنچى تەرەپ CSS بىلەن توقۇنۇشۇپ قېلىشتىن ساقلىنىش ئۈچۈن ئالدىن بېكىتىلگەن.

يىلتىز ئۆزگەرگۈچى مىقدار

بۇ يەردە بىز ئۆز ئىچىگە ئالغان ئۆزگەرگۈچى مىقدارلار ( :rootتەلەپكە دىققەت قىلىڭ) Bootstrap نىڭ CSS قاچىلانغان ھەرقانداق يېرىگە كىرگىلى بولىدۇ. ئۇلار بىزنىڭ ھۆججىتىمىزگە جايلاشقان بولۇپ ، _root.scssبىزنىڭ تۈزۈلگەن يىراق ھۆججەتلىرىمىزگە كىرىدۇ.

: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 نى ئازايتالايمىز ، ئۇسلۇبلارنىڭ ئۇۋىغان ئۈستەل قاتارلىق جايلارغا ۋارىسلىق قىلماسلىقىغا كاپالەتلىك قىلالايمىز ھەمدە Sass تۈزۈلگەندىن كېيىن Bootstrap زاپچاسلىرىنى بىر قىسىم ئاساسىي ئەسلىگە كەلتۈرۈش ۋە كېڭەيتىشكە يول قويالايمىز.

بىزنىڭ CSS ئۆزگەرگۈچى مىقدارنى قانداق ئىشلىتىۋاتقانلىقىمىزنى چۈشىنىش ئۈچۈن جەدۋەل ھۆججىتىمىزنى كۆرۈپ بېقىڭ .

بىز يەنە تورلىرىمىزدا CSS ئۆزگەرگۈچى مىقدارنى ئىشلىتىۋاتىمىز ، ئاساسلىقى ئۆستەڭ ئۈچۈن ئىشلىتىلىدۇ ، كەلگۈسىدە تېخىمۇ كۆپ زاپچاسلار ئىشلىتىلىدۇ.

مىساللار

CSS ئۆزگەرگۈچى مىقدار Sass نىڭ ئۆزگەرگۈچى مىقدارلىرىغا ئوخشاش جانلىقلىقنى تەمىنلەيدۇ ، ئەمما توركۆرگۈچكە يەتكۈزۈلۈشتىن بۇرۇن تۈزۈشنىڭ ھاجىتى يوق. مەسىلەن ، بۇ يەردە بىز بېتىمىزنىڭ خەت نۇسخىسىنى ۋە CSS ئۆزگەرگۈچى مىقدار بىلەن ئۇلىنىش ئۇسلۇبىنى ئەسلىگە كەلتۈرىمىز.

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