Langi

Langi z’omulamwa

Tukozesa ekitundu ekitono ekya langi zonna okukola ekipande kya langi ekitono okukola ensengeka za langi, era nga kisangibwa nga enkyukakyuka za Sass ne maapu ya Sass mu scss/_variables.scssfayiro ya Bootstrap.

Langi zino zonna zisangibwa nga maapu ya Sass, $theme-colors.

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

Laba Sass maps ne loops docs zaffe omanye engeri y'okukyusaamu langi zino.

Langi zonna

Langi zonna eza Bootstrap zisangibwa nga enkyukakyuka za Sass ne maapu ya Sass mu scss/_variables.scssfayiro. Okwewala okweyongera mu sayizi za fayiro, tetukola kiraasi za biwandiiko oba langi z’emabega ku buli emu ku nkyukakyuka zino. Mu kifo ky’ekyo, tulonda ekitundu ekitono ekya langi zino ku paleedi y’omulamwa .

Kakasa nti olondoola emigerageranyo gy’enjawulo nga bw’olongoosa langi. Nga bwe kiragibwa wansi, twongeddeko emigerageranyo esatu egy’enjawulo ku buli emu ku langi enkulu —ekimu ku langi za swatch eziriwo kati, ekirala ku njeru, n’endala ku ddugavu.

Ebiwandiiko ku Sass

Sass tesobola kukola programmatically variables, kale twakola manually variables ku buli tint ne shade ffekka. Tulambika omuwendo gw’ensonga ey’omu makkati (okugeza, $blue-500) era ne tukozesa emirimu gya langi egy’enjawulo okusiiga langi (okutangaaza) oba okusiiga (okuzikiza) langi zaffe nga tuyita mu mulimu gwa mix()langi ogwa Sass.

Okukozesa mix()si kye kimu lighten()ne darken()—eky’olubereberye kitabula langi eragiddwa n’enjeru oba enjeru, ate eky’oluvannyuma kitereeza omuwendo gw’obutangaavu bwa buli langi yokka. Ekivaamu ye suite ya langi ezijjuvu ennyo, nga bwe kiragibwa mu kino CodePen demo .

Emirimu gyaffe tint-color()ne shade-color()gikozesa mix()ku mabbali g’enkyukakyuka yaffe $theme-color-interval, eraga omuwendo gw’ebitundu ku kikumi ogw’emitendera ku buli langi etabuddwa gye tufulumya. Laba fayiro scss/_functions.scssne scss/_variables.scssfayiro z'ensibuko enzijuvu.

Maapu za Sass eza langi

Bootstrap's source Sass files zirimu maapu ssatu okukuyamba okutambula amangu era mu ngeri ennyangu ku lukalala lwa langi n'emiwendo gyazo egya hex.

• $colorsolukalala lwa langi zaffe zonna eza base ( 500) eziriwo
• $theme-colorsewandiika langi zonna ez’omulamwa ezituumiddwa amannya mu makulu (eziragiddwa wansi)
• $graysawandiika langi zonna n’ebisiikirize eby’enzirugavu

Mu scss/_variables.scss, ojja kusangamu enkyukakyuka za langi za Bootstrap ne maapu ya Sass. Wano waliwo ekyokulabirako kya $colorsmaapu ya 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
);

Okwongera, okuggyawo, oba kyusa emiwendo munda mu maapu okutereeza engeri gye gikozesebwamu mu bitundu ebirala bingi. Ebyembi mu kiseera kino, si buli kitundu nti ekozesa maapu eno eya Sass. Ebipya ebigenda okufulumizibwa mu biseera eby’omu maaso bijja kufuba okulongoosa ku kino. Okutuusa olwo, teekateeka okukozesa ${color}enkyukakyuka ne maapu eno eya Sass.

Eky'okulabirako

Laba engeri gy'oyinza okukozesaamu bino mu Sass yo:

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

Ebika by’omugaso gwa langi n’emabega nabyo biriwo okuteeka colorn’okukozesa emiwendo background-colorgya 500langi.

Okukola ebikozesebwa mu kukola ebintu

Yayongerwako mu v5.1.0

Bootstrap terimu na colorbikozesebwa background-colorku buli nkyukakyuka ya langi, naye osobola okukola bino ggwe kennyini n'ebikozesebwa API yaffe ne maapu zaffe eza Sass ezigaziyiziddwa ezigattibwako mu v5.1.0.

1. Okutandika, kakasa nti oyingiza emirimu gyaffe, enkyukakyuka, mixins, n'ebikozesebwa.
2. Kozesa map-merge-multiple()omulimu gwaffe okugatta amangu maapu za Sass eziwera wamu mu maapu empya.
3. Gatta maapu eno empya egatta okugaziya ekintu kyonna eky'omugaso {color}-{level}n'erinnya lya kiraasi.

Wano waliwo ekyokulabirako ekikola ebikozesebwa ebya langi y'ebiwandiiko (okugeza, .text-purple-500) nga tukozesa emitendera egyo waggulu.

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

Kino kijja kuleeta .text-{color}-{level}ebikozesebwa ebipya ku buli langi n’eddaala. Osobola okukola ekintu kye kimu ku utility endala yonna n’ebintu nabyo.