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

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

כל אונדזער מנהג פּראָפּערטיעס זענען פּרעפיקסעד מיט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-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, ענשור אַז סטיילז זענען נישט ינכעראַטיד אין ערטער ווי נעסטעד טישן, און לאָזן עטלעכע יקערדיק רעסטילינג און פאַרברייטערן פון באָאָטסטראַפּ קאַמפּאָונאַנץ נאָך סאַסס זאַמלונג.

קוק אין אונדזער טיש דאַקיומענטיישאַן פֿאַר עטלעכע ינסייט אין ווי מיר נוצן CSS וועריאַבאַלז .

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

ביישפילן

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

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

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

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