CSS וועריאַבאַלז

באָאָטסטראַפּ ינקלודז פילע CSS מנהג פּראָפּערטיעס (וועריאַבאַלז) אין זיין קאַמפּיילד CSS פֿאַר פאַקטיש-צייט קוסטאָמיזאַטיאָן אָן די נויט צו ריקאָמפּילע Sass. די צושטעלן גרינג אַקסעס צו קאַמאַנלי געוויינט וואַלועס ווי אונדזער טעמע פארבן, ברעאַקפּאָינץ און ערשטיק שריפֿט סטאַקס ווען איר אַרבעט אין דיין בלעטערער ס ינספּעקטאָר, אַ קאָד זאַמדקאַסטן אָדער אַלגעמיין פּראָוטאַטייפּ.

כל אונדזער מנהג פּראָפּערטיעס זענען פּרעפיקסעד מיטbs- צו ויסמיידן קאָנפליקט מיט דריט פּאַרטיי CSS.

וואָרצל וועריאַבאַלז

דאָ זענען די וועריאַבאַלז וואָס מיר אַרייַננעמען (באַמערקונג אַז דאָס :rootאיז פארלאנגט) וואָס קענען זיין אַקסעסט ערגעץ ווו די CSS פון Bootstrap איז לאָודיד. זיי זענען ליגן אין אונדזער _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, ענשור אַז סטיילז זענען נישט ינכעראַטיד אין ערטער ווי נעסטעד טישן, און לאָזן עטלעכע יקערדיק רעסטילינג און יקסטענדינג פון באָאָצטראַפּ קאַמפּאָונאַנץ נאָך סאַסס זאַמלונג.

קוק אין אונדזער טיש דאַקיומענטיישאַן פֿאַר עטלעכע ינסייט אין ווי מיר נוצן CSS וועריאַבאַלז . אונדזער נאַוובאַרס אויך נוצן CSS וועריאַבאַלז ווי פון וו5.2.0. מיר אויך נוצן CSS וועריאַבאַלז אַריבער אונדזער גרידס - בפֿרט פֿאַר גאַטערז די נייַע אַפּט-אין CSS גריד - מיט מער קאָמפּאָנענט באַניץ אין דער צוקונפֿט.

ווען מעגלעך, מיר וועלן באַשטימען CSS וועריאַבאַלז אין די באַזע קאָמפּאָנענט מדרגה (למשל, .navbarפֿאַר נאַוובאַר און זייַן סאַב-קאָמפּאָנענטס). דאָס ראַדוסאַז געסינג אויף ווו און ווי צו קאַסטאַמייז, און אַלאַוז פֿאַר גרינג מאָדיפיקאַטיאָנס דורך אונדזער מאַנשאַפֿט אין צוקונפֿט דערהייַנטיקונגען.

פּרעפיקס

רובֿ CSS וועריאַבאַלז נוצן אַ פּרעפיקס צו ויסמיידן קאַליזשאַנז מיט דיין אייגענע קאָדבאַסע. דעם פּרעפיקס איז אין אַדישאַן צו די --וואָס איז פארלאנגט אויף יעדער CSS בייַטעוודיק.

קאַסטאַמייז די פּרעפיקס דורך די $prefixסאַסס בייַטעוודיק. דורך פעליקייַט, עס איז באַשטימט צו bs-(טאָן די טריילינג לאָך).

ביישפילן

CSS וועריאַבאַלז פאָרשלאָגן ענלעך בייגיקייַט צו די וועריאַבאַלז פון Sass, אָבער אָן די נויט פֿאַר זאַמלונג איידער זיי געדינט צו דעם בלעטערער. פֿאַר בייַשפּיל, דאָ מיר רעסעטטינג אונדזער בלאַט ס שריפֿט און לינק סטיילז מיט CSS וועריאַבאַלז.

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

גריד ברייקפּוינץ

בשעת מיר אַרייַננעמען אונדזער גריד ברעאַקפּאָינץ ווי CSS וועריאַבאַלז (אַחוץ פֿאַר xs), זיין אַווער אַז CSS וועריאַבאַלז טאָן ניט אַרבעט אין מידיאַ קוויריז . דאָס איז דורך פּלאַן אין די CSS ספּעק פֿאַר וועריאַבאַלז, אָבער קען טוישן אין קומענדיק יאָרן מיט שטיצן פֿאַר env()וועריאַבאַלז. קוק דעם סטאַק אָווערפלאָוו ענטפער פֿאַר עטלעכע נוציק לינקס. אין דער דערווייל, איר קענען נוצן די וועריאַבאַלז אין אנדערע CSS סיטואַטיאָנס, ווי געזונט ווי אין דיין דזשאַוואַסקריפּט.