Väri

Teeman värit

Käytämme osajoukkoa kaikista väreistä luodaksemme pienemmän väripaletin väriteemoja varten. Saatavilla myös Sass-muuttujina ja Sass-kartana Bootstrapin scss/_variables.scsstiedostossa.

Kaikki nämä värit ovat saatavilla Sass-kartana, $theme-colors.

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

Katso Sass-kartoista ja -silmukoista , kuinka voit muokata näitä värejä.

Kaikki värit

Kaikki Bootstrap-värit ovat saatavilla Sass-muuttujina ja Sass-kartana scss/_variables.scsstiedostossa. Emme luo teksti- tai taustaväriluokkia kullekin näistä muuttujista, jotta vältetään tiedostokokojen suureneminen. Sen sijaan valitsemme teemapaletille joukon näitä värejä .

Muista tarkkailla kontrastisuhteita, kun muokkaat värejä. Kuten alla näkyy, olemme lisänneet kolme kontrastisuhdetta kuhunkin pääväriin – yhden mallin nykyisille väreille, yhden valkoista ja yhden mustaa vastaan.

Huomautuksia Sassista

Sass ei voi ohjelmoidusti luoda muuttujia, joten loimme manuaalisesti muuttujat jokaiselle sävylle ja sävylle itse. Määritämme keskipisteen arvon (esim. $blue-500) ja käytämme mukautettuja väritoimintoja sävyttämään (vaalentaa) tai varjostamaan (tummentamaan) värejämme Sassin mix()väritoiminnon avulla.

Käyttö mix()ei ole sama kuin lighten()ja darken()– edellinen yhdistää määritetyn värin valkoiseen tai mustaan, kun taas jälkimmäinen vain säätää kunkin värin vaaleusarvoa. Tuloksena on paljon täydellisempi värivalikoima, kuten tässä CodePen-demossa näkyy .

Meidän tint-color()ja shade-color()funktiot käyttävät mix()rinnalla $theme-color-intervalmuuttujaamme, joka määrittää porrastetun prosenttiarvon jokaiselle valmistamamme sekavärille. Katso koko lähdekoodi tiedostoista ja scss/_functions.scss.scss/_variables.scss

Värilliset Sass-kartat

Bootstrapin Sass-lähdetiedostot sisältävät kolme karttaa, joiden avulla voit nopeasti ja helposti selata väriluetteloa ja niiden hex-arvoja.

• $colorslistaa kaikki saatavilla olevat 500perusvärimme ( ) .
• $theme-colorsluettelee kaikki semanttisesti nimetyt teemavärit (näkyy alla)
• $graysluettelee kaikki harmaan sävyt ja sävyt

Sisältä scss/_variables.scsslöydät Bootstrapin värimuuttujat ja Sass-kartan. Tässä on esimerkki $colorsSass-kartasta:

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

Lisää, poista tai muokkaa kartan arvoja päivittääksesi niiden käyttöä monissa muissa osissa. Valitettavasti tällä hetkellä kaikki komponentit eivät käytä tätä Sass-karttaa. Tulevat päivitykset pyrkivät parantamaan tätä. Suunnittele siihen asti ${color}muuttujien ja tämän Sass-kartan hyödyntämistä.

Esimerkki

Näin voit käyttää näitä Sassissasi:

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

Väri- ja taustakäyttöluokat ovat myös saatavilla väriarvojen asettamista colorja background-colorkäyttöä varten .500

Apuohjelmien tuottaminen

Lisätty versioon 5.1.0

Bootstrap ei sisällä colorja background-colorapuohjelmia jokaiselle värimuuttujalle, mutta voit luoda ne itse apuohjelman API :lla ja laajennetuilla Sass-kartoilla, jotka on lisätty v5.1.0:aan.

1. Aloita varmistamalla, että olet tuonut funktiomme, muuttujamme, yhdistelmämme ja apuohjelmamme.
2. Käytä map-merge-multiple()toimintoamme yhdistääksesi nopeasti useita Sass-karttoja uudeksi kartaksi.
3. Yhdistä tämä uusi yhdistetty kartta laajentaaksesi mitä tahansa apuohjelmaa {color}-{level}luokan nimellä.

Tässä on esimerkki, joka luo tekstin väriapuohjelmat (esim. .text-purple-500) yllä olevien vaiheiden avulla.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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";

Tämä luo uusia .text-{color}-{level}apuohjelmia jokaiselle värille ja tasolle. Voit tehdä saman myös muille hyödykkeille ja kiinteistöille.