Reng

Rengên mijarê

Em komek ji hemî rengan bikar tînin da ku ji bo hilberîna nexşeyên rengan paleyek rengînek piçûktir biafirînin, di scss/_variables.scsspelê Bootstrap de wekî guhêrbarên Sass û nexşeyek Sass jî peyda dibin.

Hemî van rengan wekî nexşeyek Sass hene $theme-colors,.

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

Ji bo ku meriv van rengan çawa biguhezîne, nexşeyên Sass û belgeyên meya lûpsê binihêrin.

Hemû reng

Hemî rengên Bootstrap wekî guherbarên Sass û nexşeyek Sass di scss/_variables.scsspelê de hene. Ji bo ku em mezinahiya pelan zêde nebin, em ji bo her yek ji van guherbaran çînên rengê nivîsê an paşxanê naafirînin. Di şûna wê de, em ji bo paletek mijarek ji van rengan hildibijêrin .

Dema ku hûn rengan xweş dikin, pê ewle bin ku rêjeyên berevajîyê bişopînin. Wekî ku li jêr tê xuyang kirin, me sê rêjeyên berevajî li her yek ji rengên sereke zêde kirine -yek ji bo rengên heyî yên swatchê, yek ji bo li dijî spî, û yek ji bo li dijî reş.

Têbînî li ser Sass

Sass nikare bi bernamekî guhêrbaran çêbike, ji ber vê yekê me bi destan ji bo her reng û siya xwe guhêrbar afirandin. Em nirxa navîn diyar dikin (mînak, $blue-500) û fonksiyonên rengîn ên xwerû bikar tînin da ku bi fonksiyona rengê Sass rengên xwe reng bikin (ronî bikin) an siya bikin (tar bikin) mix().

Bikaranîn mix()ne yek e lighten()û darken()- ya berê rengê diyarkirî bi spî an reş tevlihev dike, dema ku ya paşîn tenê nirxa sivikahiya her reng eyar dike. Wekî ku di vê demoya CodePen de tê xuyang kirin , encam komek rengan pir bêkêmasî ye.

Fonksiyonên me tint-color()û li kêleka guhêrbara me bikar tînin , ku ji bo her rengê tevlihev ku em hildiberînin nirxek ji sedî gav diyar dike. Ji bo koda çavkaniyê ya tevahî pelan û pelan bibînin.shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

Nexşeyên Color Sass

Pelên Sass-a çavkaniya Bootstrap sê nexşeyan vedihewînin da ku ji we re bibin alîkar ku hûn bi lez û bez li ser navnîşek rengan û nirxên wan ên hex bigerin.

• $colorshemî 500rengên me yên bingehîn () yên berdest navnîş dike
• $theme-colorshemî rengên mijarê yên bi navên semantîk navnîş dike (li jêr têne xuyang kirin)
• $grayshemî reng û rengên gewr navnîş dike

Di hundurê scss/_variables.scssde, hûn ê guhêrbarên rengîn ên Bootstrap û nexşeya Sass bibînin. Li vir mînakek $colorsnexşeya Sass heye:

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

Nirxên di nav nexşeyê de zêde bikin, jêbirin an biguhezînin da ku ew çawa di gelek pêkhateyên din de têne bikar anîn nûve bikin. Mixabin di vê demê de, ne her pêkhate vê nexşeya Sass bikar tîne. Nûvekirinên pêşerojê dê hewl bidin ku li ser vê çêtir bikin. Heya wê hingê, plan bikin ku hûn ${color}guhêrbar û vê nexşeya Sassê bikar bînin.

Mînak

Li vir çawa hûn dikarin van di Sass-a xwe de bikar bînin:

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

Ji bo danîn û karanîna nirxên rengan jî dersên karanîna reng û paşerojê hene.colorbackground-color500

Hilberîna karûbaran

colorBootstrap ji bo her guhêrbarek rengîn û karûbaran nagire background-color, lê hûn dikarin van bi xwe bi API-ya meya karûbar û nexşeyên Sass-ê yên dirêjkirî yên ku di v5.1.0 de hatine zêdekirin, biafirînin.

1. Ji bo destpêkirinê, pê ewle bine ku we fonksiyon, guhêrbar, mîksîn û karûbarên me import kiriye.
2. Fonksiyona me bikar bînin map-merge-multiple()da ku zû di nexşeyek nû de gelek nexşeyên Sass bi hev re bicivînin.
3. Vê nexşeya hevgirtî ya nû bikin yek da ku her amûrek bi {color}-{level}navek polê dirêj bikin.

Li vir mînakek heye ku bi karanîna .text-purple-500gavên jorîn karûbarên rengê nivîsê çêdike (mînak, ).

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

Ev ê ji .text-{color}-{level}bo her reng û astê karûbarên nû çêbike. Hûn dikarin ji bo her karûbar û milkê din jî heman tiştî bikin.