צֶבַע

צבעי נושא

אנו משתמשים בתת-קבוצה של כל הצבעים כדי ליצור פלטת צבעים קטנה יותר ליצירת ערכות צבעים, זמינות גם כמשתני Sass ומפת Sass scss/_variables.scssבקובץ של Bootstrap.

כל הצבעים הללו זמינים כמפת Sass, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

עיין במסמכי המפות והלולאות של Sass שלנו כיצד לשנות צבעים אלה.

כל הצבעים

כל צבעי Bootstrap זמינים כמשתני Sass ומפת Sass scss/_variables.scssבקובץ. כדי למנוע גדלי קבצים מוגדלים, איננו יוצרים כיתות טקסט או צבעי רקע עבור כל אחד מהמשתנים הללו. במקום זאת, אנו בוחרים קבוצת משנה של צבעים אלה עבור פלטת נושא .

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

הערות על Sass

Sass לא יכול ליצור משתנים באופן תכנותי, אז יצרנו בעצמנו משתנים עבור כל גוון וגוון באופן ידני. אנו מציינים את ערך נקודת האמצע (למשל, $blue-500) ומשתמשים בפונקציות צבע מותאמות אישית כדי לגוון (להבהיר) או לגוון (להכהות) את הצבעים שלנו באמצעות mix()פונקציית הצבע של Sass.

השימוש mix()אינו זהה lighten()ל darken()--הראשון ממזג את הצבע שצוין עם לבן או שחור, בעוד שהאחרון מכוון רק את ערך הבהירות של כל צבע. התוצאה היא חבילת צבעים הרבה יותר שלמה, כפי שמוצג בהדגמה זו של CodePen .

הפונקציות שלנו tint-color()ומשתמשות לצד המשתנה שלנו, המציין ערך אחוז מדורג עבור כל צבע מעורב שאנו מייצרים. ראה את הקבצים ו עבור קוד המקור המלא.shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

מפות צבעוניות של Sass

קובצי המקור Sass של Bootstrap כוללים שלוש מפות שיעזרו לך במהירות ובקלות לעבור בלולאה על רשימת צבעים וערכי הקש שלהם.

• $colorsמפרט את כל 500צבעי הבסיס ( ) הזמינים שלנו
• $theme-colorsמפרט את כל צבעי הנושא בעלי שם סמנטי (מוצג להלן)
• $graysמפרט את כל הגוונים והגוונים של אפור

בתוך scss/_variables.scss, תמצאו את משתני הצבע של Bootstrap ואת מפת Sass. הנה דוגמה $colorsלמפת Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

הוסף, הסר או שנה ערכים בתוך המפה כדי לעדכן את אופן השימוש בהם ברכיבים רבים אחרים. לרוע המזל בשלב זה, לא כל רכיב משתמש במפת Sass זו. עדכונים עתידיים ישאפו לשפר זאת. עד אז, תכנן לעשות שימוש ${color}במשתנים ובמפת Sass הזו.

דוגמא

כך תוכל להשתמש באלה ב-Sass שלך:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

כיתות עזר צבע ורקע זמינות גם להגדרה colorושימוש בערכי הצבע background-color.500

יצירת כלי עזר

Bootstrap לא כולל colorכלי background-colorעזר עבור כל משתנה צבע, אבל אתה יכול ליצור אותם בעצמך עם ה-API של השירות שלנו ומפות Sass המורחבות שלנו שנוספו בגרסה 5.1.0.

1. כדי להתחיל, ודא שייבאת את הפונקציות, המשתנים, המיקסים וכלי השירות שלנו.
2. השתמש map-merge-multiple()בפונקציה שלנו כדי למזג במהירות מספר מפות Sass יחד במפה חדשה.
3. מיזוג את המפה המשולבת החדשה הזו כדי להרחיב כל כלי שירות עם {color}-{level}שם מחלקה.

הנה דוגמה המייצרת כלי עזר לצבע טקסט (למשל, .text-purple-500) באמצעות השלבים שלמעלה.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

זה ייצור .text-{color}-{level}כלי עזר חדשים לכל צבע ורמה. אתה יכול לעשות את אותו הדבר גם עבור כל שירות ונכס אחר.