Lanu

O le Bootstrap e lagolagoina e se faiga lanu tele e faʻaulu ai a tatou sitaili ma vaega. O lenei mea e mafai ai ona sili atu le faʻavasegaina ma faʻalauteleina mo soʻo se poloketi.

I luga o lenei itulau

Lanu autu

Matou te fa'aogaina se vaega o lanu uma e fai ai se pa'u lanu la'ititi mo le fa'atupuina o ata lanu, o lo'o avanoa fo'i e fai ma suiga Sass ma se fa'afanua Sass i le scss/_variables.scssfaila a Bootstrap.

Peraimeri

Lua

Manuia

Mata'utia

Lapataiga

Fa'amatalaga

Malamalama

Pogisa

O nei lanu uma e maua o se faafanua Sass, $theme-colors.

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

Siaki a matou fa'afanua Sass ma fa'amaufa'ailoga fa'ailoga mo le fa'afefeteina o nei lanu.

O lanu uma

O lanu uma o Bootstrap o loʻo avanoa e fai ma fesuiaiga Sass ma se faʻafanua Sass i scss/_variables.scssfaila. Ina ia aloese mai le faateleina o le tele o faila, matou te le faia ni tusitusiga po'o ni vasega lanu i tua mo nei fesuiaiga taitasi. Ae, matou te filifilia se vaega itiiti o nei lanu mo se paleti autu .

Ia mautinoa e mata'ituina fa'atusatusaga fa'atusatusa a'o e fa'avasega lanu. E pei ona faʻaalia i lalo, ua matou faʻaopoopoina faʻatusatusaga faʻatusatusa se tolu i lanu autu taʻitasi-tasi mo lanu o loʻo iai nei, tasi mo le paʻepaʻe, ma le tasi mo le uliuli.

$ lanumoana#0d6efd

$blue-100

$blue-200

$blue-300

$blue-400

$blue-500

$blue-600

$blue-700

$blue-800

$blue-900

$ indigo#6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ viole#6f42c1

$lane-100

$lane-200

$lane-300

$lane-400

$lane-500

$lane-600

$lane-700

$lane-800

$lane-900

$ piniki#d63384

$pini-100

$ piniki-200

$ piniki-300

$ piniki-400

$ piniki-500

$ piniki-600

$ piniki-700

$ piniki-800

$ piniki-900

$mumu#dc3545

$mumu-100

$mumu-200

$mumu-300

$mumu-400

$mumu-500

$mumu-600

$mumu-700

$mumu-800

$mumu-900

$ moli#fd7e14

$ moli-100

$ moli-200

$ moli-300

$ moli-400

$ moli-500

$ moli-600

$ moli-700

$ moli-800

$ moli-900

$ samasama#ffc107

$ samasama-100

$ samasama-200

$ samasama-300

$ samasama-400

$ samasama-500

$ samasama-600

$ samasama-700

$ samasama-800

$ samasama-900

$meamata#198754

$meamata-100

$meamata-200

$meamata-300

$meamata-400

$meamata-500

$meamata-600

$meamata-700

$meamata-800

$meamata-900

$teal#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$efuefu-500#adb5bd

$efuefu-100

$efuefu-200

$efuefu-300

$efuefu-400

$efuefu-500

$efuefu-600

$efuefu-700

$efuefu-800

$efuefu-900

$uliuli#000

$ paepae#fff

Fa'amatalaga i Sass

E le mafai e Sass ona fa'apolokalameina le fa'atupuina o fesuiaiga, o lea na matou faia ai ma le lima ni fesuiaiga mo lanu uma ma paolo i matou lava. Matou te fa'amaoti le tau o le vaeluagalemu (fa'ata'ita'iga, $blue-500) ma fa'aaoga galuega fa'aaganu'u lanu e fa'apupulaina ai (fa'amalama) po'o le paolo (pouliuli) o matou lanu e ala i le mix()galuega lanu a Sass.

O le fa'aogaina mix()e le tutusa ma le lighten()ma darken()—o le mea muamua e fa'afefiloi le lanu ma'oti ma le pa'epa'e po'o le uliuli, a'o le mea mulimuli e na'o le fetu'una'ia o le tau mama o lanu ta'itasi. O le taunuuga o se seti sili atu ona atoatoa o lanu, e pei ona faʻaalia i lenei CodePen demo .

O a matou tint-color()ma shade-color()galuega e faʻaoga mix()faʻatasi ma a matou $theme-color-intervalfesuiaiga, lea e faʻamaonia ai le tau o le pasene mo lanu fefiloi taitasi matou te gaosia. Va'ai le scss/_functions.scssma scss/_variables.scssfaila mo le fa'ailoga puna atoa.

Fa'afanua Sass lanu

O faila Sass fa'apogai a Bootstrap e aofia ai fa'afanua se tolu e fesoasoani ia te oe vave ma faigofie ona fa'asolo i luga o se lisi o lanu ma o latou tulaga hex.

$colorso lo'o lisi uma ai a matou fa'avae ( 500) lanu
$theme-colorslisi uma igoa autu lanu lanu (fa'aali i lalo)
$grayslisi uma lanu ma lanu efuefu

I totonu scss/_variables.scss, o le ae mauaina suiga lanu a Bootstrap ma le faafanua Sass. O se fa'ata'ita'iga lea o le $colorsfa'afanua Sass:

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

Fa'aopoopo, ave'ese, pe sui fa'atatau i totonu o le fa'afanua e fa'afou ai pe fa'apefea ona fa'aoga i le tele o isi vaega. Ae paga lea i le taimi nei, e le o vaega uma e faʻaaogaina lenei faʻafanua Sass. O faʻamatalaga i le lumanaʻi o le a taumafai e faʻaleleia lenei mea. Seia o'o i lena taimi, fuafua i le fa'aogaina o ${color}fesuiaiga ma lenei fa'afanua Sass.

Faataitaiga

O le auala lenei e mafai ai ona e faʻaogaina nei mea i lau Sass:

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

O lo'o avanoa fo'i vasega fa'aoga lanu ma tuacolor mo le fa'atulagaina ma background-colorle fa'aogaina o 500fa'ailoga lanu.

Fausia mea aoga

Fa'aopoopo i le v5.1.0

Bootstrap e le o aofia ai colorma background-colormea aoga mo lanu eseese uma, ae e mafai ona e gaosia oe lava ia i la matou aoga API ma a matou faafanua lautele Sass faaopoopo i le v5.1.0.

Ina ia amata, ia mautinoa ua e faaulufale mai a matou galuega, fesuiaiga, mixins, ma mea aoga.
Fa'aoga la matou map-merge-multiple()galuega e vave tu'u fa'atasi ai fa'afanua Sass se tele i se fa'afanua fou.
Fa'atasi lenei fa'afanua fou tu'ufa'atasi e fa'alautele so'o se mea aoga ma se {color}-{level}igoa o le vasega.

O se fa'ata'ita'iga lea e fa'atupuina ai fa'aoga lanu o tusitusiga (fa'ata'ita'iga, .text-purple-500) fa'aaoga laasaga o lo'o i luga.

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

O lenei mea o le a fa'atupuina ai fa'aoga fou .text-{color}-{level}mo lanu ma tulaga uma. E mafai foi ona e faia le mea lava e tasi mo soʻo se isi lava mea aoga ma meatotino.