Litur

Þema litir

Við notum undirmengi allra lita til að búa til minni litavali til að búa til litasamsetningu, einnig fáanlegt sem Sass breytur og Sass kort í Bootstrap scss/_variables.scssskránni.

Allir þessir litir eru fáanlegir sem Sass kort, $theme-colors.

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

Skoðaðu Sass kortin og lykkjuskjölin okkar til að sjá hvernig á að breyta þessum litum.

Allir litir

Allir Bootstrap litir eru fáanlegir sem Sass breytur og Sass kort í scss/_variables.scssskrá. Til að forðast auknar skráarstærðir búum við ekki til texta- eða bakgrunnslitaflokka fyrir hverja af þessum breytum. Þess í stað veljum við undirmengi þessara lita fyrir þemapallettu .

Vertu viss um að fylgjast með birtuhlutföllum þegar þú sérsníða liti. Eins og sýnt er hér að neðan, höfum við bætt þremur birtuhlutföllum við hvern af aðallitunum - einum fyrir núverandi liti sýnishornsins, einum fyrir á móti hvítum og einum fyrir á móti svörtu.

Athugasemdir um Sass

Sass getur ekki búið til breytur með forritunaraðferðum, þannig að við bjuggum til breytur handvirkt fyrir hvern lit og litbrigði sjálf. Við tilgreinum miðpunktsgildið (td $blue-500) og notum sérsniðnar litaaðgerðir til að lita (ljósa) eða skyggja (myrkva) litina okkar í gegnum litaaðgerð Sass mix().

Notkun mix()er ekki það sama og lighten()og darken()— sá fyrrnefndi blandar tilgreindum lit með hvítum eða svörtum, en sá síðarnefndi stillir aðeins ljósgildi hvers litar. Niðurstaðan er miklu fullkomnari litasvíta, eins og sýnt er í þessari CodePen kynningu .

Okkar tint-color()og shade-color()aðgerðir nota mix()samhliða $theme-color-intervalbreytunni okkar, sem tilgreinir þrepsett prósentugildi fyrir hvern blandaðan lit sem við framleiðum. Sjáðu scss/_functions.scssog scss/_variables.scssskrárnar fyrir allan frumkóðann.

Litur Sass kort

Uppruna Sass skrár Bootstrap innihalda þrjú kort til að hjálpa þér að hringja fljótt og auðveldlega yfir lista yfir liti og sexgildi þeirra.

• $colorslistar alla tiltæka grunnliti okkar ( 500).
• $theme-colorslistar alla merkingarlega nafngreinda þemaliti (sýnt hér að neðan)
• $grayslistar alla lita og gráa tóna

Innan scss/_variables.scss, munt þú finna litabreytur Bootstrap og Sass kort. Hér er dæmi um $colorsSass kortið:

$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
);

Bættu við, fjarlægðu eða breyttu gildum á kortinu til að uppfæra hvernig þau eru notuð í mörgum öðrum hlutum. Því miður á þessum tíma nota ekki allir hlutir þetta Sass kort. Framtíðaruppfærslur munu leitast við að bæta úr þessu. Þangað til þá skaltu íhuga að nýta þér ${color}breyturnar og þetta Sass kort.

Dæmi

Svona geturðu notað þetta í Sass þínum:

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

Lita- og bakgrunnsgagnaflokkar eru einnig fáanlegir til að stilla colorog background-colornota 500litagildin.

Að búa til veitur

Bootstrap inniheldur ekki colorog background-colortól fyrir hverja litabreytu, en þú getur búið til þær sjálfur með tólum API okkar og auknu Sass kortunum okkar bætt við í v5.1.0.

1. Til að byrja skaltu ganga úr skugga um að þú hafir flutt inn aðgerðir okkar, breytur, blöndun og tól.
2. Notaðu map-merge-multiple()aðgerðina okkar til að sameina mörg Sass kort fljótt saman í nýtt kort.
3. Sameina þetta nýja samsetta kort til að framlengja hvaða tól sem er með {color}-{level}flokksheiti.

Hér er dæmi sem býr til textalitaforrit (td .text-purple-500) með því að nota skrefin hér að ofan.

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

Þetta mun búa til ný .text-{color}-{level}tól fyrir hvern lit og stig. Þú getur líka gert það sama fyrir önnur tól og eignir.