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épek és hurkok dokumentumainkat , hogy hogyan módosíthatja ezeket a színeket.

Minden szín

Az összes 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,
  "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