Ngjyrë

Ngjyrat e temave

Ne përdorim një nëngrup të të gjitha ngjyrave për të krijuar një gamë më të vogël ngjyrash për gjenerimin e skemave të ngjyrave, të disponueshme gjithashtu si variabla Sass dhe një hartë Sass në scss/_variables.scssskedarin e Bootstrap.

Të gjitha këto ngjyra janë të disponueshme si një hartë Sass, $theme-colors.

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

Shikoni hartat tona Sass dhe dokumentet e sytheve për mënyrën e modifikimit të këtyre ngjyrave.

Të gjitha ngjyrat

Të gjitha ngjyrat e Bootstrap janë të disponueshme si variabla Sass dhe një hartë Sass në scss/_variables.scssskedar. Për të shmangur rritjen e madhësive të skedarëve, ne nuk krijojmë klasa të ngjyrave të tekstit ose sfondit për secilën prej këtyre variablave. Në vend të kësaj, ne zgjedhim një nëngrup të këtyre ngjyrave për një paletë temash .

Sigurohuni që të monitoroni raportet e kontrastit ndërsa personalizoni ngjyrat. Siç tregohet më poshtë, ne kemi shtuar tre raporte kontrasti në secilën prej ngjyrave kryesore - një për ngjyrat aktuale të modelit, një kundër të bardhës dhe një kundër të zezës.

Shënime mbi Sass

Sass nuk mund të gjenerojë variabla në mënyrë programore, kështu që ne vetë krijuam variabla për çdo nuancë dhe hije. Ne specifikojmë vlerën e pikës së mesit (p.sh., $blue-500) dhe përdorim funksionet e personalizuara të ngjyrave për të ngjyrosur (ndriçuar) ose hije (errësuar) ngjyrat tona nëpërmjet mix()funksionit të ngjyrave të Sass.

Përdorimi mix()nuk është i njëjtë si lighten()dhe - e darken()para përzien ngjyrën e specifikuar me të bardhën ose të zezën, ndërsa e dyta rregullon vetëm vlerën e butësisë së secilës ngjyrë. Rezultati është një grup shumë më i plotë ngjyrash, siç tregohet në këtë demonstrim të CodePen .

Funksionet tona tint-color()dhe shade-color()përdoren mix()së bashku me $theme-color-intervalndryshoren tonë, e cila specifikon një vlerë përqindjeje të shkallëzuar për çdo ngjyrë të përzier që prodhojmë. Shihni skedarët scss/_functions.scssdhe scss/_variables.scsspër kodin e plotë burimor.

Hartat me ngjyra Sass

Skedarët burimor Sass të Bootstrap përfshijnë tre harta për t'ju ndihmuar të shikoni shpejt dhe me lehtësi një listë ngjyrash dhe vlerat e tyre heks.

• $colorsliston të gjitha 500ngjyrat tona bazë ( ) të disponueshme
• $theme-colorsliston të gjitha ngjyrat e temave të emërtuara semantikisht (treguar më poshtë)
• $graysliston të gjitha nuancat dhe nuancat e grisë

Brenda scss/_variables.scss, do të gjeni variablat e ngjyrave të Bootstrap dhe hartën Sass. Këtu është një shembull i $colorshartës 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
);

Shtoni, hiqni ose modifikoni vlerat brenda hartës për të përditësuar mënyrën se si ato përdoren në shumë komponentë të tjerë. Fatkeqësisht në këtë kohë, jo çdo komponent e përdor këtë hartë Sass. Përditësimet e ardhshme do të përpiqen ta përmirësojnë këtë. Deri atëherë, planifikoni të përdorni ${color}variablat dhe këtë hartë Sass.

Shembull

Ja se si mund t'i përdorni këto në Sass tuaj:

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

Klasat e përdorimit të ngjyrave dhe sfondit janë gjithashtu të disponueshme për vendosjen colordhe background-colorpërdorimin e 500vlerave të ngjyrave.

Gjenerimi i shërbimeve komunale

Bootstrap nuk përfshin colordhe background-colorprograme ndihmëse për çdo variabël ngjyrash, por ju mund t'i gjeneroni ato vetë me API-në tonë të shërbimeve dhe hartat tona të zgjeruara Sass të shtuara në v5.1.0.

1. Për të filluar, sigurohuni që të keni importuar funksionet, variablat, përzierjet dhe shërbimet tona.
2. Përdorni map-merge-multiple()funksionin tonë për të bashkuar shpejt disa harta Sass së bashku në një hartë të re.
3. Bashkoni këtë hartë të re të kombinuar për të zgjeruar çdo mjet me një {color}-{level}emër klase.

Ja një shembull që gjeneron shërbime të ngjyrave të tekstit (p.sh., .text-purple-500) duke përdorur hapat e mësipërm.

@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";

Kjo do të gjenerojë .text-{color}-{level}shërbime të reja për çdo ngjyrë dhe nivel. Ju mund të bëni të njëjtën gjë edhe për çdo shërbim dhe pronë tjetër.