Faarf

Thema Faarwen

Mir benotzen en Ënnerdeel vun alle Faarwen fir eng méi kleng Faarfpalette ze kreéieren fir Faarfschemaen ze generéieren, och verfügbar als Sass Variablen an eng Sass Kaart an der Bootstrap scss/_variables.scssDatei.

All dës Faarwen sinn als Sass Kaart verfügbar $theme-colors,.

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

Kuckt eis Sass Kaarten a Loops Dokumenter fir wéi Dir dës Faarwen ännert.

All Faarwen

All Bootstrap Faarwen sinn als Sass Variablen an eng Sass Kaart an der scss/_variables.scssDatei verfügbar. Fir vergréissert Dateigréissten ze vermeiden, kreéiere mir keng Text- oder Hannergrondfaarfklassen fir all dës Variabelen. Amplaz wielen mir e Subset vun dëse Faarwen fir eng Themepalette .

Gitt sécher Kontrastverhältnisser ze iwwerwaachen wéi Dir Faarwen personaliséiert. Wéi hei ënnendrënner, hu mir dräi Kontrastverhältnisser zu jiddereng vun den Haaptfaarwe bäigefüügt - eng fir déi aktuell Faarwen vun der Swatch, eng fir géint Wäiss, an een fir géint Schwaarz.

Notes op Sass

Sass kann net programmatesch Variabelen generéieren, sou datt mir manuell Variablen fir all Tint a Schiet selwer erstallt hunn. Mir spezifizéieren de Mëttelpunktwäert (zB, $blue-500) a benotze personaliséiert Faarffunktiounen fir eis Faarwen iwwer Sass seng Faarffunktioun ze schaarfen (beliichten) oder ze schaarfen (däischter) mix().

D'Benotzung mix()ass net d'selwecht wéi lighten()an darken()- dee fréiere vermëscht déi spezifizéiert Faarf mat wäiss oder schwaarz, während dee Leschten nëmmen de Liichtwäerter vun all Faarf upasst. D'Resultat ass eng vill méi komplett Suite vu Faarwen, wéi an dëser CodePen Demo gewisen .

Eis tint-color()a shade-color()Funktiounen benotzen mix()niewt eiser $theme-color-intervalVariabel, déi e stepped Prozentsaz Wäert fir all gemëschte Faarf spezifizéiert déi mir produzéieren. Kuckt d' scss/_functions.scssa scss/_variables.scssDateien fir de komplette Quellcode.

Faarf Sass Kaarten

Bootstrap Quell Sass Dateien enthalen dräi Kaarten fir Iech ze hëllefen séier a liicht iwwer eng Lëscht vu Faarwen an hir Hexwäerter ze schloen.

• $colorslëscht all eis verfügbar Basis ( 500) Faarwen
• $theme-colorsLëscht all semantesch benannt Thema Faarwen (ënnert gewisen)
• $grayslëscht all Téin a Schatten vu gro

Bannen scss/_variables.scssfannt Dir Bootstrap Faarfvariablen a Sass Kaart. Hei ass e Beispill vun der $colorsSass Kaart:

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

Füügt, läscht oder ännert Wäerter bannent der Kaart fir ze aktualiséieren wéi se a villen anere Komponenten benotzt ginn. Leider zu dëser Zäit benotzt net all Komponent dës Sass Kaart. Zukünfteg Updates wäerte probéieren dëst ze verbesseren. Bis dohin, plangt d' ${color}Verännerlechen an dës Sass Kaart ze benotzen.

Beispill

Hei ass wéi Dir dës an Ärem Sass benotze kënnt:

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

Faarf an Hannergrond Utility Klassen sinn och verfügbar fir d'Faarfwäerter ze setzen coloran ze background-colorbenotzen 500.

Utilities generéieren

Bootstrap enthält keng Utilities colorfir background-colorall Faarfvariabel, awer Dir kënnt dës selwer generéieren mat eisem Utility API an eise erweiderten Sass Kaarten a v5.1.0 bäigefüügt.

1. Fir unzefänken, gitt sécher datt Dir eis Funktiounen, Variablen, Mixins an Utilities importéiert hutt.
2. Benotzt eis map-merge-multiple()Funktioun fir séier verschidde Sass Kaarten an enger neier Kaart ze fusionéieren.
3. Fusioun dës nei kombinéiert Kaart fir all Utility mat engem {color}-{level}Klassennumm ze verlängeren.

Hei ass e Beispill dat Textfaarf Utilities generéiert (zB .text-purple-500) mat de Schrëtt hei uewen.

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

Dëst generéiert nei .text-{color}-{level}Utilities fir all Faarf an Niveau. Dir kënnt datselwecht fir all aner Utility an Immobilie maachen.