Spalva

Temos spalvos

Naudojame visų spalvų poaibį, kad sukurtume mažesnę spalvų paletę spalvų schemoms generuoti, taip pat kaip Sass kintamieji ir Sass žemėlapis Bootstrap scss/_variables.scssfaile.

Visos šios spalvos galimos kaip Sass žemėlapis, $theme-colors.

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

Peržiūrėkite mūsų Sass žemėlapių ir kilpų dokumentus , kaip pakeisti šias spalvas.

Visos spalvos

Visos Bootstrap spalvos galimos kaip Sass kintamieji ir Sass žemėlapis scss/_variables.scssfaile. Kad nepadidėtų failų dydžiai, nekuriame teksto ar fono spalvų klasių kiekvienam iš šių kintamųjų. Vietoj to mes pasirenkame šių spalvų poaibį temos paletei .

Tinkindami spalvas būtinai stebėkite kontrasto santykį. Kaip parodyta toliau, kiekvienai iš pagrindinių spalvų pridėjome tris kontrasto santykius – vieną – esamoms pavyzdžio spalvoms, vieną – prieš baltą ir kitą – prieš juodą.

Pastabos apie Sasą

Sass negali programiškai generuoti kintamųjų, todėl kiekvienam atspalviui ir atspalviui kintamuosius sukūrėme patys. Mes nurodome vidurio taško reikšmę (pvz., $blue-500) ir naudojame pasirinktines spalvų funkcijas, kad atspalvintume (šviesintume) arba atspalvintume (tamsintume) savo spalvas per Sass mix()spalvų funkciją.

Naudojimas mix()nėra tas pats, kas lighten()ir darken()– pirmasis sulieja nurodytą spalvą su balta arba juoda, o antroji tik koreguoja kiekvienos spalvos šviesumo reikšmę. Rezultatas yra daug išsamesnis spalvų rinkinys, kaip parodyta šioje CodePen demonstracijoje .

Mūsų tint-color()ir shade-color()funkcijos naudojamos mix()kartu su mūsų $theme-color-intervalkintamuoju, kuris nurodo kiekvienos mūsų gaminamos mišrios spalvos procentinę reikšmę. Visą šaltinio kodą rasite scss/_functions.scssir failuose.scss/_variables.scss

Spalvoti Sass žemėlapiai

„Bootstrap“ šaltinio „Sass“ failuose yra trys žemėlapiai, kurie padės greitai ir lengvai peržiūrėti spalvų sąrašą ir jų šešioliktaines reikšmes.

• $colorspateikiamos visos mūsų turimos bazinės ( 500) spalvos
• $theme-colorspateikiamos visos semantiškai pavadintos temos spalvos (parodyta žemiau)
• $grayspateikiami visi pilkos spalvos atspalviai ir atspalviai

scss/_variables.scssSvetainėje rasite „Bootstrap“ spalvų kintamuosius ir „Sass“ žemėlapį . $colorsŠtai Sass žemėlapio pavyzdys :

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

Pridėkite, pašalinkite arba keiskite reikšmes žemėlapyje, kad atnaujintumėte, kaip jos naudojamos daugelyje kitų komponentų. Deja, šiuo metu ne kiekvienas komponentas naudoja šį Sass žemėlapį. Būsimi atnaujinimai stengsis tai pagerinti. Iki tol planuokite naudotis ${color}kintamaisiais ir šiuo Sass žemėlapiu.

Pavyzdys

Štai kaip galite juos naudoti savo „Sass“:

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

Taip pat galimos spalvų ir fonocolor naudingumo klasės, leidžiančios nustatyti ir background-colornaudoti 500spalvų reikšmes.

Komunalinių paslaugų generavimas

Pridėta 5.1.0 versijoje

„Bootstrap“ neapima colorkiekvieno background-colorspalvų kintamojo paslaugų, tačiau galite jas sugeneruoti patys naudodami mūsų paslaugų API ir išplėstinius „Sass“ žemėlapius, pridėtus 5.1.0 versijoje.

1. Norėdami pradėti, įsitikinkite, kad importavote mūsų funkcijas, kintamuosius, derinius ir komunalines paslaugas.
2. Naudokite mūsų map-merge-multiple()funkciją, kad greitai sujungtumėte kelis Sass žemėlapius į naują žemėlapį.
3. Sujunkite šį naują kombinuotą žemėlapį, kad išplėstumėte bet kokią priemonę {color}-{level}klasės pavadinimu.

Pateikiame pavyzdį, kuris generuoja teksto spalvų priemones (pvz., .text-purple-500) atlikdamas aukščiau nurodytus veiksmus.

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

Tai sukurs naujų .text-{color}-{level}paslaugų kiekvienai spalvai ir lygiui. Tą patį galite padaryti ir bet kokiam kitam komunaliniam naudojimui ir nuosavybei.