Muhlovo

Mihlovo ya nhloko-mhaka

Hi tirhisa ntlawa lowutsongo wa mihlovo hinkwayo ku endla phalete ya mihlovo leyitsongo yo tumbuluxa swikimi swa mihlovo, leyi tlhelaka yi kumeka tanihi swilo leswi cinca-cincaka swa Sass na mepe wa Sass eka scss/_variables.scssfayili ya Bootstrap.

Mihlovo leyi hinkwayo yi kumeka tanihi mepe wa Sass, $theme-colors.

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

Languta mimepe ya hina ya Sass na ti loops docs ku kuma ndlela yo cinca mihlovo leyi.

Mihlovo hinkwayo

Mihlovo hinkwayo ya Bootstrap yi kumeka tanihi swilo leswi cinca-cincaka swa Sass na mepe wa Sass eka scss/_variables.scssfayili. Ku papalata ku engeteleka ka vukulu bya tifayela, a hi endli titlilasi ta matsalwa kumbe ta mihlovo ya le ndzhaku eka xin’wana ni xin’wana xa swilo leswi cinca-cincaka. Ematshan’weni ya sweswo, hi hlawula ntlawa lowutsongo wa mihlovo leyi ya phalete ya nhloko-mhaka .

Tiyiseka leswaku u languta mpimo wa ku hambana loko u ri karhi u endla leswaku mihlovo yi va leyi u yi lavaka. Hilaha swi kombisiweke hakona laha hansi, hi engetele swipimelo swinharhu swa ku hambana eka yin’wana ni yin’wana ya mihlovo leyikulu—yin’wana ya mihlovo ya sweswi ya swatch, yin’wana ya ku lwisana ni yo basa ni yin’wana ya ku lwisana ni ya ntima.

Tinhlamuselo eka Sass

Sass a yi nge swi koti ku tumbuluxa swilo leswi cinca-cincaka hi ndlela ya nongonoko, hikwalaho hi endle swilo leswi cinca-cincaka hi voko eka tint yin’wana ni yin’wana ni ndzhuti hi hexe. Hi boxa ntikelo wa ndhawu ya le xikarhi (xikombiso, $blue-500) naswona hi tirhisa mintirho ya mihlovo ya ntolovelo ku tint (ku voninga) kumbe ku endla ndzhuti (ku endla ntima) mihlovo ya hina hi ku tirhisa mix()ntirho wa mihlovo wa Sass.

Ku tirhisa mix()a swi fani na lighten()na darken()—leyo sungula yi hlanganisa muvala lowu boxiweke ni wo basa kumbe wa ntima, kasi ya vumbirhi yi lulamisa ntsena ntikelo wa ku olova ka muvala wun’wana ni wun’wana. Vuyelo bya kona i nxaxamelo lowu heleleke swinene wa mihlovo, hilaha swi kombisiweke hakona eka demo leyi ya CodePen .

Mintirho ya hina tint-color()na shade-color()yi tirhisa mix()etlhelo ka $theme-color-intervalxihlawulekisi xa hina, lexi hlamuselaka ntikelo wa tiphesente ta magoza eka muvala wun’wana na wun’wana lowu pfanganisiweke lowu hi wu humesaka. Vona tifayela ta scss/_functions.scssna scss/_variables.scssku kuma khodi ya xihlovo leyi heleleke.

Mihlovo ya mimepe ya Sass

Tifayili ta Sass ta xihlovo xa Bootstrap ti katsa mimepe yinharhu ku ku pfuna ku hatlisa no olova ku rhendzeleka ehenhla ka nxaxamelo wa mihlovo na mimpimo ya yona ya hex.

• $colorsyi xaxameta mihlovo hinkwayo ya hina ya xisekelo ( 500) leyi kumekaka
• $theme-colorsyi xaxameta mihlovo hinkwayo ya nhlokomhaka leyi thyiweke mavito ya nhlamuselo (leyi kombisiweke laha hansi) .
• $graysyi xaxameta tints hinkwato na tinxaka ta grey

Endzeni ka scss/_variables.scss, u ta kuma swilo leswi cinca-cincaka swa mihlovo ya Bootstrap ni mepe wa Sass. Hi lexi xikombiso xa $colorsmepe wa 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
);

Engetela, susa kumbe ku cinca mimpimo endzeni ka mepe ku pfuxeta ndlela leyi yi tirhisiwaka ha yona eka swiphemu swin’wana swo tala. Khombo ra kona eka nkarhi lowu, a hi xiphemu xin’wana na xin’wana lexi tirhisaka mepe lowu wa Sass. Swilo leswi pfuxetiweke swa nkarhi lowu taka swi ta lwela ku antswisa eka leswi. Ku fikela kwalaho, pulana ku tirhisa ${color}swilo leswi cinca-cincaka na mepe lowu wa Sass.

Xikombiso

Hi leyi ndlela leyi u nga tirhisaka leswi ha yona eka Sass ya wena:

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

Titlilasi ta vukorhokeri bya mihlovo na le ndzhaku na tona ta kumeka ku veka colorna background-colorku tirhisa 500mimpimo ya mihlovo.

Ku tumbuluxa switirhisiwa swa vukorhokeri

Bootstrap a yi katsi colorna background-colorswitirhisiwa swa xihlawulekisi xin’wana na xin’wana xa muvala, kambe u nga tumbuluxa leswi hi wexe hi API ya hina ya vukorhokeri na mimepe ya hina leyi andlariweke ya Sass leyi engeteriweke eka v5.1.0.

1. Ku sungula, tiyisisa leswaku u nghenise mintirho ya hina, swilo leswi cinca-cincaka, mixins, na switirhisiwa.
2. Tirhisa map-merge-multiple()ntirho wa hina ku hatlisa u hlanganisa mimepe yo tala ya Sass swin’we eka mepe lowuntshwa.
3. Hlanganisa mepe lowu wuntshwa lowu hlanganisiweke ku andlala vukorhokeri byihi na byihi hi {color}-{level}vito ra tlilasi.

Hi lexi xikombiso lexi humesaka switirhisiwa swa mihlovo ya matsalwa (xikombiso, .text-purple-500) hi ku tirhisa magoza lama nga laha henhla.

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

Leswi swi ta humesa .text-{color}-{level}switirhisiwa leswintshwa eka muvala wun’wana na wun’wana na xiyimo. U nga endla leswi fanaka eka vukorhokeri byin’wana ni byin’wana ni nhundzu na swona.