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

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

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

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

ביישפילן

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

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