Umbala

Imibala yetimu

Sisebenzisa isethi engaphansi yayo yonke imibala ukuze sakhe iphalethi yombala emincane ukuze sikhiqize izikimu zombala, futhi ezitholakala njengeziguquguqukayo ze-Sass kanye nemephu ye-Sass scss/_variables.scsskufayela le-Bootstrap.

Yonke le mibala iyatholakala njengemephu yakwa-Sass, $theme-colors.

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

Bheka amamephu wethu we-Sass kanye ne-loops amadokhumenti ukuthi ungayishintsha kanjani le mibala.

Yonke imibala

Yonke imibala ye-Bootstrap iyatholakala njengezinto eziguquguqukayo ze-Sass kanye nemephu ye-Sass scss/_variables.scssefayeleni. Ukuze ugweme ukukhuphuka kosayizi bamafayela, asiwadali amakilasi ombala wombhalo noma wengemuva ngalinye kwalokhu okuguquguqukayo. Kunalokho, sikhetha isethi engaphansi yale mibala yephalethi yetimu .

Qiniseka ukuthi uqapha izilinganiso zokungafani njengoba wenza imibala ngendlela oyifisayo. Njengoba kukhonjisiwe ngezansi, sengeze izilinganiso zokungafani ezintathu kumbala ngamunye oyinhloko—owodwa owombala wamanje we-swatch, owokuqala ophikisana nomhlophe, nomunye owomnyama.

Amanothi ku-Sass

I-Sass ayikwazi ukukhiqiza okuguquguqukayo ngokohlelo, ngakho-ke sizenzele mathupha okuguquguqukayo kwawo wonke ama-tint nomthunzi ngokwethu. Sicacisa inani lephoyinti elimaphakathi (isb, $blue-500) futhi sisebenzise imisebenzi yombala yangokwezifiso ukuze sififize (sikhanyise) noma senze umthunzi (sifiphaze) imibala yethu mix()ngomsebenzi wombala we-Sass.

Ukusebenzisa mix()akufani nokuthi lighten()futhi darken()—okokuqala kuhlanganisa umbala oshiwo nomhlophe noma omnyama, kuyilapho owakamuva ulungisa kuphela inani lokukhanya lombala ngamunye. Umphumela uba iqoqo eliphelele kakhulu lemibala, njengoba kukhonjisiwe kule demo ye-CodePen .

Okwethu tint-color()kanye shade-color()nemisebenzi kusetshenziswa mix()eduze $theme-color-intervalnokuguquguquka kwethu, okucacisa inani lephesenti elengeziwe lombala ngamunye oxubile esiwukhiqizayo. Bona scss/_functions.scsskanye scss/_variables.scssnamafayela ukuze uthole ikhodi yomthombo egcwele.

Amamephu e-Sass anemibala

Amafayela e-Sass omthombo we-Bootstrap ahlanganisa amamephu amathathu ukuze akusize ngokushesha futhi kalula ungene ohlwini lwemibala namanani ayo e-hex.

• $colorsibala yonke isisekelo esitholakalayo ( 500) imibala
• $theme-colorsibala yonke imibala yetimu eqanjwe ngokwezibalo (eboniswe ngezansi)
• $graysibala wonke amathoni kanye nemithunzi empunga

Ngaphakathi scss/_variables.scss, uzothola okuguquguqukayo kombala kwe-Bootstrap kanye nemephu ye-Sass. Nasi isibonelo $colorssemephu ye-Sass:

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

Engeza, susa, noma lungisa amanani ngaphakathi kwemephu ukuze ubuyekeze indlela asetshenziswa ngayo kwezinye izingxenye eziningi. Ngeshwa ngalesi sikhathi, akuzona zonke izingxenye ezisebenzisa le mephu ye-Sass. Izibuyekezo zesikhathi esizayo zizolwela ukuthuthukisa kulokhu. Kuze kube yileso sikhathi, hlela ukusebenzisa ${color}okuguquguqukayo kanye nale mephu ye-Sass.

Isibonelo

Nansi indlela ongazisebenzisa ngayo lezi ku-Sass yakho:

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

Amakilasi okusetshenziswa kombala nengemuva nawo ayatholakala ekusetheni colornasekusebenziseni background-coloramanani 500ombala.

Ukukhiqiza izinsiza

Kwengezwe ku-v5.1.0

I- Bootstrap ayibandakanyi colorkanye background-colornezinsiza zawo wonke umbala oguquguqukayo, kodwa ungazikhiqizela lokhu nge -API yethu yokusetshenziswa kanye namamephu ethu anwetshiwe e-Sass engezwe ku-v5.1.0.

1. Ukuze uqale, qiniseka ukuthi ungenise imisebenzi yethu, okuguquguqukayo, imiksi, nezinsiza.
2. Sebenzisa map-merge-multiple()umsebenzi wethu ukuhlanganisa ngokushesha amamephu amaningi e-Sass ndawonye kumephu entsha.
3. Hlanganisa le mephu entsha ehlanganisiwe ukuze unwebe noma iyiphi insiza ngegama {color}-{level}lekilasi.

Nasi isibonelo esikhiqiza izinsiza zombala wombhalo (isb, .text-purple-500) usebenzisa izinyathelo ezingenhla.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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";

Lokhu kuzokhiqiza .text-{color}-{level}izinsiza ezintsha kuwo wonke umbala nezinga. Ungenza okufanayo kunoma iyiphi enye insiza kanye nempahla.