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. O lenei mea e mafai ai ona sili atu le faʻavasegaina ma faʻalauteleina 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'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,
  "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.