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

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

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

קידומת

רוב משתני ה-CSS משתמשים בקידומת כדי למנוע התנגשויות עם בסיס הקוד שלך. קידומת זו מתווספת לקידומת --הנדרשת בכל משתנה CSS.

התאם אישית את הקידומת באמצעות $prefixהמשתנה Sass. כברירת מחדל, הוא מוגדר ל- bs-(שים לב למקף העוקב).

דוגמאות

משתני 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 שלך.