דלג לתוכן הראשי דלג לניווט במסמכים
in English

משתני CSS

השתמש במאפייני ה-CSS המותאמים אישית של Bootstrap לעיצוב ופיתוח מהירים וצופים קדימה.

Bootstrap כולל מאפייני CSS מותאמים אישית רבים (משתנים) ב-CSS המותאם שלו להתאמה אישית בזמן אמת ללא צורך בהידור מחדש של Sass. אלה מספקים גישה קלה לערכים נפוצים כמו צבעי הנושא, נקודות השבירה וערימות הגופנים העיקריות שלנו בעת עבודה במפקח הדפדפן שלך, ארגז חול של קוד או אב טיפוס כללי.

כל המאפיינים המותאמים אישית שלנו מקבלים קידומתbs- כדי למנוע התנגשויות עם CSS של צד שלישי.

משתני שורש

להלן המשתנים שאנו כוללים (שים לב שהחובה :rootנדרשת) שניתן לגשת אליהם בכל מקום שבו נטען ה-CSS של Bootstrap. הם ממוקמים _root.scssבקובץ שלנו ונכללים בקובצי ה-DIST שלנו.

: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 המהודר שלנו, להבטיח שסגנונות לא יעברו בירושה במקומות כמו טבלאות מקוננות, ולאפשר סגנון מחדש והרחבה בסיסיים של רכיבי Bootstrap לאחר הידור של Sass.

עיין בתיעוד הטבלה שלנו לקבלת תובנות לגבי האופן שבו אנו משתמשים במשתני 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()במשתנים. בדוק את התשובה הזו של Stack Overflow לכמה קישורים מועילים. בינתיים, אתה יכול להשתמש במשתנים אלה במצבי CSS אחרים, כמו גם ב-JavaScript שלך.