Szín

Téma színei

Az összes szín egy részhalmazát használjuk, hogy létrehozzunk egy kisebb színpalettát a színsémák létrehozásához, amelyek Sass változókként és Sass térképként is elérhetők a Bootstrap scss/_variables.scssfájljában.

Mindezek a színek Sass térképként, $theme-colors.

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

Tekintse meg Sass térképeket és hurkokat tartalmazó dokumentumainkat , hogy hogyan módosíthatja ezeket a színeket.

Minden szín

Minden Bootstrap szín elérhető Sass változóként és Sass térképként scss/_variables.scssfájlban. A megnövekedett fájlméret elkerülése érdekében nem hozunk létre szöveg- vagy háttérszínosztályokat ezekhez a változókhoz. Ehelyett ezeknek a színeknek egy részhalmazát választjuk ki a témapalettákhoz .

A színek testreszabásakor ügyeljen a kontrasztarányokra. Az alábbiak szerint három kontrasztarányt adtunk minden fő színhez – egyet a minta jelenlegi színeihez, egyet a fehérhez és egyet a feketéhez.

Megjegyzések Sassról

A Sass nem tud programozottan változókat generálni, ezért saját kezűleg hoztunk létre változókat minden árnyalathoz és árnyalathoz. Megadjuk a középpont értékét (pl. $blue-500), és egyedi színfüggvényekkel színezzük (világosítjuk) vagy árnyékoljuk (sötétítjük) a színeinket a Sass színfunkcióján keresztül mix().

A használat mix()nem ugyanaz, mint lighten()és darken()– az előbbi a megadott színt fehérrel vagy feketével keveri, míg az utóbbi csak az egyes színek világosságát állítja be. Az eredmény egy sokkal teljesebb színkészlet, amint azt ez a CodePen bemutató is mutatja .

A mi tint-color()és a shade-color()függvényeink mix()a változónkkal együtt használják $theme-color-interval, amely lépcsőzetes százalékos értéket ad meg minden egyes előállított kevert színhez. Tekintse meg a scss/_functions.scssés scss/_variables.scssfájlokat a teljes forráskódért.

Színes Sass térképek

A Bootstrap Sass forrásfájljai három térképet tartalmaznak, amelyek segítségével gyorsan és egyszerűen áttekintheti a színek listáját és hexadecimális értékeit.

• $colorsfelsorolja az összes elérhető alapszínünket ( 500).
• $theme-colorsfelsorolja az összes szemantikailag elnevezett témaszínt (lent látható)
• $graysfelsorolja a szürke összes árnyalatát és árnyalatát

Ezen belül scss/_variables.scssmegtalálja a Bootstrap színváltozóit és a Sass térképet. Íme egy példa a $colorsSass térképre:

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

Adjon hozzá, távolítson el vagy módosítson értékeket a térképen, hogy frissítse azok felhasználási módját sok más összetevőben. Sajnos jelenleg nem minden összetevő használja ezt a Sass térképet. A jövőbeli frissítések ezen javítani fognak. Addig is tervezze a ${color}változók és a Sass térkép felhasználását.

Példa

A következőképpen használhatja ezeket a Sass-ban:

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

Szín- és háttérhasználati osztályok is rendelkezésre állnak a színértékek beállításához colorés background-colorhasználatához .500

Közművek előállítása

A Bootstrap nem tartalmaz colorés background-colorsegédprogramokat minden színváltozóhoz, de ezeket saját maga is létrehozhatja a segédprogram API -val és a v5.1.0-s verzióban hozzáadott kiterjesztett Sass térképeinkkel.

1. Kezdésként győződjön meg arról, hogy importálta a függvényeinket, változóinkat, mixeinket és segédprogramjainkat.
2. Funkciónkkal map-merge-multiple()gyorsan egyesíthet több Sass térképet egy új térképen.
3. Egyesítse ezt az új kombinált térképet, hogy bármely segédprogramot {color}-{level}osztálynévvel bővítsen.

Íme egy példa, amely szövegszín segédprogramokat (pl. .text-purple-500) hoz létre a fenti lépések segítségével.

@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}Ez minden színhez és szinthez új segédprogramokat generál . Ugyanezt megteheti bármely más közművel és ingatlannal is.