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,
  "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.