Krāsa

Tēmas krāsas

Mēs izmantojam visu krāsu apakškopu, lai izveidotu mazāku krāsu paleti krāsu shēmu ģenerēšanai, kas ir pieejama arī kā Sass mainīgie un Sass karte Bootstrap scss/_variables.scssfailā.

Visas šīs krāsas ir pieejamas kā Sass karte, $theme-colors.

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

Apskatiet mūsu Sass karšu un cilpu dokumentus , lai uzzinātu, kā mainīt šīs krāsas.

Visas krāsas

Visas Bootstrap krāsas ir pieejamas kā Sass mainīgie un Sass karte scss/_variables.scssfailā. Lai izvairītos no failu lieluma palielināšanas, mēs neveidojam teksta vai fona krāsu klases katram no šiem mainīgajiem. Tā vietā mēs motīvu paletei izvēlamies šo krāsu apakškopu .

Pielāgojot krāsas, noteikti uzraugiet kontrasta attiecības. Kā parādīts zemāk, katrai galvenajai krāsai esam pievienojuši trīs kontrasta attiecības — vienu parauga pašreizējām krāsām, vienu pret balto un otru pret melno.

Piezīmes par Sasu

Sass nevar programmatiski ģenerēt mainīgos, tāpēc mēs paši manuāli izveidojām mainīgos katram nokrāsai un tonim. Mēs norādām viduspunkta vērtību (piem., $blue-500) un izmantojam pielāgotas krāsu funkcijas, lai ietonētu (izgaismotu) vai ietonētu (tumšotu) mūsu krāsas, izmantojot Sass mix()krāsu funkciju.

Izmantošana mix()nav tas pats, kas lighten()un darken()— pirmā sajauc norādīto krāsu ar balto vai melno, bet otrā tikai pielāgo katras krāsas gaišuma vērtību. Rezultāts ir daudz pilnīgāks krāsu komplekts, kā parādīts šajā CodePen demonstrācijā .

Mūsu tint-color()un shade-color()funkcijas tiek izmantotas mix()kopā ar mūsu $theme-color-intervalmainīgo, kas nosaka pakāpenisku procentuālo vērtību katrai mūsu ražotajai jauktajai krāsai. Pilnu avota kodu skatiet failos scss/_functions.scssun .scss/_variables.scss

Krāsu Sass kartes

Bootstrap avota Sass failos ir iekļautas trīs kartes, kas palīdz ātri un viegli pārmeklēt krāsu sarakstu un to heksadecimālās vērtības.

• $colorsuzskaita visas mūsu pieejamās bāzes ( 500) krāsas
• $theme-colorsuzskaita visas semantiski nosauktās motīvu krāsas (parādītas zemāk)
• $graysuzskaita visas pelēkās nokrāsas un toņus

Vietnē scss/_variables.scss, jūs atradīsiet Bootstrap krāsu mainīgos un Sass karti. $colorsŠeit ir Sass kartes piemērs :

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

Pievienojiet, noņemiet vai modificējiet vērtības kartē, lai atjauninātu to izmantošanu daudzos citos komponentos. Diemžēl šobrīd ne katrs komponents izmanto šo Sass karti. Turpmākie atjauninājumi centīsies to uzlabot. Līdz tam plānojiet izmantot ${color}mainīgos lielumus un šo Sass karti.

Piemērs

Lūk, kā jūs varat tos izmantot savā Sass:

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

Krāsu vērtību iestatīšanai un lietošanai ir pieejamas arī krāsu un fona lietderības klases .colorbackground-color500

Komunālo pakalpojumu ģenerēšana

Bootstrap neietver colorun background-colorutilītas katram krāsu mainīgajam, taču varat tos ģenerēt pats, izmantojot mūsu utilīta API un mūsu paplašinātās Sass kartes, kas pievienotas v5.1.0.

1. Lai sāktu, pārliecinieties, vai esat importējis mūsu funkcijas, mainīgos, miksus un utilītas.
2. Izmantojiet mūsu map-merge-multiple()funkciju, lai ātri apvienotu vairākas Sass kartes jaunā kartē.
3. Apvienojiet šo jauno kombinēto karti, lai paplašinātu jebkuru utilītu ar {color}-{level}klases nosaukumu.

Šeit ir piemērs, kas ģenerē teksta krāsu utilītus (piem., .text-purple-500), izmantojot iepriekš minētās darbības.

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

Tas radīs jaunas .text-{color}-{level}utilītas katrai krāsai un līmenim. Jūs varat darīt to pašu ar jebkuru citu komunālo pakalpojumu un īpašumu.