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

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

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

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

مىساللار

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

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

Grid breakpoint

كاتەكچە بۆلىكىمىزنى CSS ئۆزگەرگۈچى مىقدار دەپ ئۆز ئىچىگە ئالغان بولساقمۇ (CSS ئۆزگەرگۈچى مىقدار xs) مېدىيا سوئاللىرىدا ئىشلىمەيدۇ . بۇ ئۆزگەرگۈچى مىقدارنىڭ CSS ئۆلچىمىدە لايىھەلەنگەن ، ئەمما env()ئۆزگەرگۈچى مىقدارنى قوللاپ كەلگۈسى يىللاردا ئۆزگىرىشى مۇمكىن. بەزى پايدىلىق ئۇلىنىشلار ئۈچۈن بۇ Stack Overflow جاۋابىنى تەكشۈرۈپ بېقىڭ . شۇنىڭ بىلەن بىر ۋاقىتتا ، سىز بۇ ئۆزگەرگۈچى مىقدارنى باشقا CSS ئەھۋاللىرىدا ، شۇنداقلا JavaScript دا ئىشلىتەلەيسىز.