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-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;
}

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

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

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

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

Prefix

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

$prefixSass ئۆزگەرگۈچى مىقدار ئارقىلىق ئالدى قوشۇلغۇچىنى خاسلاشتۇرۇڭ . سۈكۈت بويىچە ، ئۇ تەڭشەلدى bs-.

مىساللار

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 دا ئىشلىتەلەيسىز.