פאַרב

טעמע פארבן

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

אַלע די פארבן זענען בנימצא ווי אַ Sass מאַפּע, $theme-colors.

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

קוק אונדזער Sass מאַפּס און לופּס דאָקס פֿאַר ווי צו מאָדיפיצירן די פארבן.

אַלע פארבן

כל באָאָטסטראַפּ פארבן זענען בנימצא ווי סאַסס וועריאַבאַלז און אַ סאַסס מאַפּע אין scss/_variables.scssטעקע. צו ויסמיידן געוואקסן טעקע סיזעס, מיר טאָן ניט מאַכן טעקסט אָדער הינטערגרונט פֿאַרב קלאסן פֿאַר יעדער פון די וועריאַבאַלז. אַנשטאָט, מיר קלייַבן אַ סאַבסעט פון די פארבן פֿאַר אַ טעמע פּאַליטרע .

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

הערות אויף סאַסס

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

די נוצן mix()איז נישט די זעלבע ווי lighten()און darken()- די ערשטע בלענדז די ספּעסיפיעד קאָליר מיט ווייַס אָדער שוואַרץ, בשעת די יענער בלויז אַדזשאַסטיד די לייטנאַס ווערט פון יעדער קאָליר. דער רעזולטאַט איז אַ פיל מער פולשטענדיק סוויט פון פארבן, ווי געוויזן אין דעם CodePen דעמאָ .

אונדזער tint-color()און shade-color()פאַנגקשאַנז נוצן mix()צוזאמען אונדזער $theme-color-intervalבייַטעוודיק, וואָס ספּעציפיצירן אַ סטעפּט פּראָצענט ווערט פֿאַר יעדער געמישט קאָליר מיר פּראָדוצירן. זען די scss/_functions.scssאון scss/_variables.scssטעקעס פֿאַר די פול מקור קאָד.

קאָליר סאַס מאַפּס

באָאָטסטראַפּ ס מקור סאַס טעקעס אַרייַננעמען דריי מאַפּס צו העלפֿן איר געשווינד און לייכט שלייף איבער אַ רשימה פון פארבן און זייער העקס וואַלועס.

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

ין scss/_variables.scss, איר וועט געפֿינען Bootstrap ס קאָליר וועריאַבאַלז און Sass מאַפּע. דאָ ס אַ ביישפּיל פון די $colorsSass מאַפּע:

$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קאָליר וואַלועס.

דזשענערייטינג יוטילאַטיז

באָאָטסטראַפּ טוט נישט אַרייַננעמען colorאון background-colorיוטילאַטיז פֿאַר יעדער קאָליר בייַטעוודיק, אָבער איר קענען דזשענערייט די זיך מיט אונדזער נוצן אַפּי און אונדזער עקסטענדעד סאַס מאַפּס צוגעגעבן אין וו5.1.0.

1. צו אָנהייבן, מאַכן זיכער אַז איר האָט ימפּאָרטיד אונדזער פאַנגקשאַנז, וועריאַבאַלז, מיקסינס און יוטילאַטיז.
2. ניצן אונדזער map-merge-multiple()פונקציע צו געשווינד צונויפגיסן קייפל סאַס מאַפּס צוזאַמען אין אַ נייַע מאַפּע.
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}יוטילאַטיז פֿאַר יעדער קאָליר און מדרגה. איר קענען טאָן די זעלבע פֿאַר קיין אנדערע נוצן און פאַרמאָג.