Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga

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

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
$pa'epa'e#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'aaogaina mix()e le tutusa ma le lighten()ma darken()—o le mea muamua e fa'afefiloi le lanu fa'amaonia 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,
  "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'aogaina i le tele o isi vaega. Ae paga lea i le taimi nei, e le o vaega uma e faʻaogaina 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 fesuiaiga lanu uma, ae e mafai ona e faia oe lava ia i la matou aoga API ma a matou faafanua lautele Sass faaopoopo i le v5.1.0.

  1. Ina ia amata, ia mautinoa ua e faaulufale mai a matou galuega, fesuiaiga, mixins, ma mea aoga.
  2. 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.
  3. Fa'atasi le 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/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 ona e faia le mea lava e tasi mo soʻo se isi lava mea aoga ma meatotino.