Mmala

Mebala ya sehlogo

Re šomiša sehlopha se senyenyane sa mebala ka moka go hlama phalete ya mebala ye nnyane ya go tšweletša dikema tša mebala, yeo gape e hwetšagalago bjalo ka diphetogo tša Sass le mmapa wa Sass ka scss/_variables.scssfaeleng ya Bootstrap.

Mebala ye ka moka e hwetšagala bjalo ka mmapa wa Sass, $theme-colors.

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

Lekola dimmapa tša rena tša Sass le ditokomane tša diloupu bakeng sa kamoo o ka fetošago mebala ye.

Mebala ka moka

Mebala ka moka ya Bootstrap e hwetšagala bjalo ka diphetogo tša Sass le mmapa wa Sass ka scss/_variables.scssfaeleng. Go efoga bogolo bja faele bjo bo oketšegilego, ga re hlame diklase tša mebala ya sengwalwa goba ya morago bakeng sa ye nngwe le ye nngwe ya diphetogo tše. Go e na le moo, re kgetha sehlopha se senyenyane sa mebala ye bakeng sa phalete ya sehlogo .

Kgonthišetša gore o hlokomela ditekanyo tša phapano ge o dutše o tlwaetša mebala. Bjalo ka ge go bontšhitšwe ka mo tlase, re okeditše ditekanyo tše tharo tša phapano go e nngwe le e nngwe ya mebala e megolo—e nngwe bakeng sa mebala ya gona bjale ya swatch, e nngwe bakeng sa kgahlanong le bošweu le e nngwe bakeng sa kgahlanong le boso.

Dintlha ka Sass

Sass e ka se kgone go tšweletša diphetogo ka lenaneo, ka gona re ile ra hlama diphetogo ka seatla bakeng sa tint e nngwe le e nngwe le moriti ka borena. Re laetša boleng bja ntlha ya magareng (mohlala, ) gomme re šomiša mešomo ya mebala ya tlwaelo go tint (bofefofatša) goba go dira moriti (go fifatša) mebala ya rena ka mošomo wa mmala wa $blue-500Sass .mix()

Go diriša mix()ga go swane le lighten()le darken()—ya pele e kopanya mmala wo o laeditšwego le o mošweu goba o motsothwa, mola ya mafelelo e beakanya feela boleng bja go ba bofefo bja mmala o mongwe le o mongwe. Sephetho ke sutu e feletšego kudu ya mebala, bjalo ka ge go bontšhitšwe go demo ye ya CodePen .

Rena tint-color()le shade-color()mešomo e šomiša mix()go bapa le $theme-color-intervalphetogo ya rena, yeo e laetšago boleng bja phesente bja kgato bakeng sa mmala wo mongwe le wo mongwe wo o hlakantšwego wo re o tšweletšago. Bona scss/_functions.scssle scss/_variables.scssdifaele bakeng sa khoutu ya mohlodi e feletseng.

Mmala wa Sass dimmapa

Bootstrap o mohlodi Sass difaele kenyeletsa tse tharo limmapa ho u thusa ka potlako le habonolo loop ka lenane la mebala le boleng bona hex.

• $colorse lokeletša 500mebala ya rena ka moka ya motheo ( ) yeo e lego gona
• $theme-colorse lokeletša mebala ka moka ya sehlogo yeo e reeletšwego ka semantiki (yeo e bontšhitšwego ka mo tlase) .
• $grayse lokeletša di-tint ka moka le meriti ya bohlokwahlokwa

Ka gare ga scss/_variables.scss, o tla hwetša diphetogo tša mmala tša Bootstrap le mmapa wa Sass. Mohlala wa $colorsmmapa wa Sass ke wo:

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

Oketša, tloša, goba fetoša dikelo ka gare ga mmapa go mpshafatša ka fao di šomišwago ka gona dikarolong tše dingwe tše ntši. Ka bomadimabe mo nakong ye, ga se karolo e nngwe le e nngwe yeo e dirišago mmapa wo wa Sass. Diapdeite tša ka moso di tla katanela go kaonafatša se. Go fihla ka nako yeo, rulaganya go šomiša ${color}diphetogo le mmapa wo wa Sass.

Mohlala

Ke kamoo o ka dirišago tše ka gona ka go Sass ya gago:

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

Diklase tša mohola wa mebala le wa moragocolor le tšona di a hwetšagala bakeng sa go beakanya le background-colorgo diriša 500dikelo tša mebala.

Go tšweletša didirišwa

Bootstrap ga e akaretše colorle background-colordidirišwa tša go fetoga ga mmala wo mongwe le wo mongwe, eupša o ka tšweletša tše ka bowena ka API ya rena ya didirišwa le dimmapa tša rena tša Sass tše di atološitšwego tšeo di okeditšwego go v5.1.0.

1. Go thoma, kgonthiša gore o tsentše mešomo ya rena, diphetogo, mixins, le didirišwa.
2. Šomiša map-merge-multiple()mošomo wa rena go kopanya ka pela mebapa ye mentši ya Sass mmogo ka mmapeng wo mofsa.
3. Kopanya mmapa wo o mofsa wo o kopantšwego go katološa sedirišwa sefe goba sefe ka {color}-{level}leina la sehlopha.

Mohlala wo o tšweletšago didirišwa tša mmala wa sengwalwa (mohlala, .text-purple-500) ke wo o šomiša magato a ka godimo.

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

Se se tla tšweletša didirišwa tše mpsha .text-{color}-{level}tša mmala wo mongwe le wo mongwe le maemo. O ka dira se se swanago bakeng sa utility efe goba efe e nngwe le thoto le yona.