kalakala

kala kala

Hoʻohana mākou i kahi ʻāpana o nā waihoʻoluʻu āpau e hana i kahi palette liʻiliʻi liʻiliʻi no ka hana ʻana i nā kala kala, loaʻa pū me nā ʻano Sass a me kahi palapala ʻāina Sass ma ka scss/_variables.scssfaila Bootstrap.

Loaʻa kēia mau kala āpau ma ke ʻano he palapala Sass, $theme-colors.

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

E nānā i kā mākou palapala ʻāina Sass a me nā puka lou no ka hoʻololi ʻana i kēia mau kala.

Nā kala a pau

Loaʻa nā kala Bootstrap āpau e like me nā ʻano Sass a me kahi palapala Sass ma ka scss/_variables.scssfaila. No ka pale ʻana i ka nui o ka faila, ʻaʻole mākou e hana i nā kikokikona a i ʻole nā ​​​​papa waihoʻoluʻu no kēlā me kēia o kēia mau ʻano. Akā, koho mākou i kahi ʻāpana o kēia mau kala no kahi palette kumuhana .

E nānā pono i nā ratio like ʻole i kou hoʻopilikino ʻana i nā kala. E like me ka mea i hōʻike ʻia ma lalo nei, ua hoʻohui mākou i ʻekolu lakiō ʻokoʻa i kēlā me kēia kala nui—hoʻokahi no nā kala o kēia manawa, hoʻokahi no ke keʻokeʻo, a hoʻokahi no ka ʻeleʻele.

Nā memo ma Sass

ʻAʻole hiki iā Sass ke hoʻopololei i nā mea hoʻololi, no laila ua hana lima mākou i nā mea hoʻololi no kēlā me kēia kala a me ka malu iā mākou iho. Hōʻike mākou i ka waiwai waena (e laʻa, $blue-500) a hoʻohana i nā hana kala maʻamau e hoʻomālamalama (māmā) a i ʻole ka malu (pōʻeleʻele) i kā mākou kala ma o mix()ka hana kala a Sass.

mix()ʻAʻole like ka hoʻohana ʻana me ka a lighten()- darken()ʻo ka mea mua e hoʻohui i ke kala i ʻōlelo ʻia me ke keʻokeʻo a ʻeleʻele paha, ʻoiai ka mea hope e hoʻoponopono wale i ka waiwai māmā o kēlā me kēia kala. ʻO ka hopena he hui piha piha o nā kala, e like me ka hōʻike ʻana ma kēia CodePen demo .

Hoʻohana ʻia kā mākou tint-color()a me shade-color()nā hana mix()me kā mākou ʻano $theme-color-intervalhoʻololi, e kuhikuhi ana i kahi waiwai pākēneka i hoʻopaʻa ʻia no kēlā me kēia kala hui ʻia a mākou e hana ai. E ʻike i nā scss/_functions.scssa me scss/_variables.scssnā faila no ke code kumu piha.

Nā palapala 'āina Sass kala

Aia nā waihona Sass kumu o Bootstrap i ʻekolu palapala ʻāina e kōkua iā ʻoe e hoʻopaʻa wikiwiki a maʻalahi i ka papa inoa o nā kala a me nā waiwai hex.

• $colors500papa inoa i nā waihoʻoluʻu kumu ( ) i loaʻa
• $theme-colorspapa inoa i nā kala kumumanaʻo i kapa inoa ʻia (e hōʻike ʻia ma lalo)
• $grayspapa inoa i nā ʻoni a pau a me nā aka hina

I loko o scss/_variables.scsska , e ʻike ʻoe i nā ʻano waihoʻoluʻu o Bootstrap a me ka palapala ʻāina Sass. Eia kekahi laʻana o ka $colorspalapala ʻāina 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
);

Hoʻohui, wehe, a hoʻololi paha i nā waiwai i loko o ka palapala ʻāina no ka hoʻonui ʻana i ke ʻano o ka hoʻohana ʻia ʻana ma nā ʻāpana ʻē aʻe. ʻO ka mea pōʻino i kēia manawa, ʻaʻole hoʻohana nā mea āpau i kēia palapala Sass. E hoʻoikaika nā mea hou e hiki mai ana e hoʻomaikaʻi i kēia. A hiki i kēlā manawa, e hoʻolālā i ka hoʻohana ʻana i nā ${color}mea hoʻololi a me kēia palapala Sass.

Laʻana

Eia pehea ʻoe e hoʻohana ai i kēia mau mea i kāu Sass:

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

Loaʻa pū nā papa hana kala a me ka hope no ka hoʻonohonoho ʻana colora background-colorme ka hoʻohana ʻana i 500nā waiwai kala.

Ke hana nei i nā pono hana

ʻAʻole hoʻokomo ʻo Bootstrap colora me background-colornā pono no kēlā me kēia ʻano kala, akā hiki iā ʻoe ke hana iā ʻoe iho me kā mākou API pono a me kā mākou mau palapala Sass lōʻihi i hoʻohui ʻia ma v5.1.0.

1. No ka hoʻomaka ʻana, e hōʻoia ʻoe ua lawe mai i kā mākou mau hana, nā ʻano hoʻololi, nā mixins, a me nā pono hana.
2. E hoʻohana i kā mākou map-merge-multiple()hana e hoʻohui koke i nā palapala ʻāina Sass i kahi palapala ʻāina hou.
3. E hoʻohui i kēia palapala 'āina hou e hoʻonui i ka pono me ka {color}-{level}inoa papa.

Eia kekahi laʻana e hana ana i nā pono kala kala kikokikona (e laʻa, .text-purple-500) me ka hoʻohana ʻana i nā ʻanuʻu ma luna.

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

E hana kēia i nā .text-{color}-{level}pono hana hou no kēlā me kēia kala a me ka pae. Hiki iā ʻoe ke hana like no nā pono a me nā waiwai ʻē aʻe kekahi.