Launi

Launukan jigo

Muna amfani da juzu'in duk launuka don ƙirƙirar ƙaramin palette mai launi don ƙirƙirar tsarin launi, kuma ana samun su azaman masu canjin Sass da taswirar Sass a cikin scss/_variables.scssfayil ɗin Bootstrap.

Duk waɗannan launuka suna samuwa azaman taswirar Sass, $theme-colors.

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

Duba taswirorin mu na Sass da takaddun madaukai don yadda ake canza waɗannan launuka.

Duk launuka

Duk launukan Bootstrap suna samuwa azaman masu canjin Sass da taswirar Sass a cikin scss/_variables.scssfayil. Don guje wa ƙara girman girman fayil, ba mu ƙirƙira rubutu ko azuzuwan launi na bango ga kowane ɗayan waɗannan masu canji ba. Madadin haka, mun zaɓi wani yanki na waɗannan launuka don palette mai jigo .

Tabbatar kula da ma'auni na bambanci yayin da kuke keɓance launuka. Kamar yadda aka nuna a ƙasa, mun ƙara bambance-bambancen bambanci guda uku zuwa kowane babban launuka - ɗaya don launukan swatch na yanzu, ɗaya don farar fata, ɗaya kuma na gaba da baki.

Bayanan kula akan Sass

Sass ba zai iya samar da masu canji da tsari ba, don haka da hannu muka ƙirƙiri masu canji ga kowane tint da inuwa kan kanmu. Mun ƙididdige ƙimar tsakiyar maki (misali, $blue-500) kuma muna amfani da ayyukan launi na al'ada don yin tint (haske) ko inuwa (mai duhu) launukanmu ta aikin mix()launi na Sass.

Amfani mix()ba iri ɗaya bane da lighten()kuma darken()— tsohon yana haɗa ƙayyadaddun launi tare da fari ko baki, yayin da na ƙarshen kawai ke daidaita ƙimar haske na kowane launi. Sakamakon shine ƙarin cikakkun launuka masu yawa, kamar yadda aka nuna a cikin wannan CodePen demo .

Ayyukanmu tint-color()da ayyukanmu shade-color()suna amfani da mabambantan mix()mu $theme-color-interval, wanda ke ƙayyadad da ƙimar kashi ga kowane gauraye launi da muke samarwa. Duba fayilolin scss/_functions.scssda scss/_variables.scsscikakken lambar tushe.

Taswirar Sass Launi

Fayilolin Sass tushen Bootstrap sun haɗa da taswira guda uku don taimaka muku cikin sauri da sauƙi madauki kan jerin launuka da ƙimar hex ɗin su.

• $colorsya lissafa dukkan 500launukan tushe ( ) da muke da su
• $theme-colorsya lissafa duk launukan jigo masu suna na ma'ana (wanda aka nuna a ƙasa)
• $graysya lissafa duk tints da inuwar launin toka

A ciki scss/_variables.scss, zaku sami masu canjin launi na Bootstrap da taswirar Sass. Ga misalin $colorstaswirar 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
);

Ƙara, cire, ko gyara ƙima a cikin taswira don sabunta yadda ake amfani da su a cikin sauran abubuwa da yawa. Abin baƙin ciki a wannan lokacin, ba kowane sashi ke amfani da wannan taswirar Sass ba. Sabuntawa na gaba za su yi ƙoƙarin ingantawa akan wannan. Har sai lokacin, yi shirin yin amfani da masu ${color}canji da wannan taswirar Sass.

Misali

Ga yadda zaku iya amfani da waɗannan a cikin Sass ɗin ku:

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

Hakanan ana samun azuzuwan amfanin launi da bangocolor don saitawa da background-coloramfani da 500ƙimar launi.

Samar da kayan aiki

Bootstrap baya haɗawa colorda background-colorkayan aiki don kowane mai canza launi, amma zaku iya samar da waɗannan da kanku tare da API ɗin mu da ƙarin taswirar Sass ɗin mu da aka ƙara a v5.1.0.

1. Don farawa, tabbatar cewa kun shigo da ayyukanmu, masu canji, abubuwan haɗin gwiwa, da abubuwan amfani.
2. Yi amfani da map-merge-multiple()aikin mu don haɗa taswirorin Sass da sauri tare a cikin sabuwar taswira.
3. Haɗa wannan sabuwar taswirar haɗin gwiwa don tsawaita kowane mai amfani da {color}-{level}sunan aji.

Ga misalin da ke samar da kayan aikin launi na rubutu (misali, .text-purple-500) ta amfani da matakan da ke sama.

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

Wannan zai haifar da sababbin .text-{color}-{level}abubuwan amfani ga kowane launi da matakin. Kuna iya yin haka don kowane kayan aiki da kadara kuma.