Ahosuo

Bootstrap no boa denam kɔla nhyehyɛe a ɛtrɛw a ɛde yɛn ntadehyɛ ne nneɛma a ɛwom no asɛmti so. Eyi ma wotumi yɛ nsakrae ne ntrɛwmu a ɛkɔ akyiri ma adwuma biara.

Wɔ kratafa yi so

Asɛmti kɔla ahorow

Yɛde kɔla nyinaa subset di dwuma de yɛ kɔla palette ketewa bi a yɛde yɛ kɔla nhyehyɛe, a ɛsan nso wɔ hɔ sɛ Sass variables ne Sass map wɔ Bootstrap scss/_variables.scssfael no mu.

Mfiaseɛ

Nea ɛto so abien

Nkunimdie

Ɔhaw a ɛbɛtumi aba

Kɔkɔbɔ

Info

Kanea

Sum

Saa kɔla ahorow yi nyinaa wɔ hɔ sɛ Sass asase mfonini, $theme-colors.

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

Hwɛ yɛn Sass maps ne loops docs no na woahu sɛnea wobɛsesa saa kɔla ahorow yi.

Kɔla ahorow nyinaa

Bootstrap kɔla nyinaa wɔ hɔ sɛ Sass variables ne Sass map wɔ scss/_variables.scssfael mu. Sɛnea ɛbɛyɛ a yɛbɛkwati fael akɛse a ɛbɛkɔ soro no, yɛnyɛ nsɛm anaa akyi kɔla adesua ahorow mma saa nsakrae ahorow yi mu biara. Mmom no, yɛpaw saa kɔla ahorow yi fã ketewaa bi ma asɛmti palette .

Hwɛ hu sɛ wobɛhwɛ nneɛma a ɛne ne ho bɔ abira bere a woreyɛ kɔla ahorow no sɛnea wopɛ no. Sɛnea wɔakyerɛ wɔ ase hɔ no, yɛde nsonsonoe ahorow abiɛsa aka kɔla atitiriw no mu biara ho —baako ma swatch no kɔla ahorow a ɛwɔ hɔ mprempren, biako ma fitaa, ne biako ma tuntum.

$blue a ɛyɛ bruu#0d6efd na ɛwɔ hɔ

$blue-100 na ɛyɛ

$blue-200 na ɛyɛ

$blue-300 na ɛyɛ

$blue-400 na ɛyɛ

$blue-500 na ɛyɛ

$blue-600 na ɛyɛ

$blue-700 na ɛyɛ

$blue-800 na ɛyɛ

$blue-900 na ɛyɛ

$indigo no#6610f2 na ɛwɔ hɔ

$indigo-100 na ɛwɔ hɔ

$indigo-200 na ɛwɔ hɔ

$indigo-300 na ɛwɔ hɔ

$indigo-400 na ɛwɔ hɔ

$indigo-500 na ɛwɔ hɔ

$indigo-600 na ɛwɔ hɔ

$indigo-700 na ɛwɔ hɔ

$indigo-800 na ɛwɔ hɔ

$indigo-900 na ɛwɔ hɔ

$a ɛyɛ kɔkɔɔ#6f42c1 na ɛwɔ hɔ

$kɔkɔɔ-100

$kɔkɔɔ-200

$kɔkɔɔ-300

$kɔkɔɔ-400

$a ɛyɛ kɔkɔɔ-500

$kɔkɔɔ-600

$a ɛyɛ kɔkɔɔ-700

$a ɛyɛ kɔkɔɔ-800

$kɔkɔɔ-900

$pink a ɛyɛ fɛ#d63384 na ɛwɔ hɔ

$pink-100 na ɛwɔ hɔ

$pink-200 na ɛyɛ

$pink-300 na ɛyɛ

$pink-400 na ɛyɛ

$pink-500 na ɛyɛ

$pink-600 na ɛyɛ

$pink-700 na ɛyɛ

$pink-800 na ɛyɛ

$pink-900 na ɛyɛ

$red#dc3545 na ɛwɔ hɔ

$kɔkɔɔ-100

$kɔkɔɔ-200

$kɔkɔɔ-300

$kɔkɔɔ-400

$kɔkɔɔ-500

$kɔkɔɔ-600

$kɔkɔɔ-700

$kɔkɔɔ-800

$kɔkɔɔ-900

$orange a ɛyɛ fɛ#fd7e14 na ɛwɔ hɔ

$orange-100 na ɛyɛ

$orange-200 na ɛyɛ

$orange-300 na ɛyɛ

$orange-400 na ɛyɛ

$orange-500 na ɛyɛ

$orange-600 na ɛyɛ

$orange-700 na ɛyɛ

$orange-800 na ɛyɛ

$orange-900 na ɛyɛ

$yellow#ffc107 na ɛwɔ hɔ

$kɔkɔɔ-100

$kɔkɔɔ-200

$kɔkɔɔ-300

$kɔkɔɔ-400

$kɔkɔɔ-500

$kɔkɔɔ-600

$kɔla kɔkɔɔ-700

$kɔkɔɔ-800

$kɔkɔɔ-900

$a ɛyɛ ahabammono#198754 na ɛwɔ hɔ

$a ɛyɛ ahabammono-100

$a ɛyɛ ahabammono-200

$a ɛyɛ ahabammono-300

$a ɛyɛ ahabammono-400

$a ɛyɛ ahabammono-500

$a ɛyɛ ahabammono-600

$a ɛyɛ ahabammono-700

$a ɛyɛ ahabammono-800

$a ɛyɛ ahabammono-900

$teal#20c997 na ɛwɔ hɔ

$teal-100 na ɛwɔ hɔ

$teal-200 na ɛyɛ

$teal-300 na ɛyɛ

$teal-400 na ɛyɛ

$teal-500 na ɛyɛ

$teal-600 na ɛyɛ

$teal-700 na ɛyɛ

$teal-800 na ɛyɛ

$teal-900 na ɛyɛ

$cyan na ɛyɛ#0dcaf0 na ɛwɔ hɔ

$cyan-100 na ɛyɛ

$cyan-200 na ɛyɛ

$cyan-300 na ɛyɛ

$cyan-400 na ɛyɛ

$cyan-500 na ɛyɛ

$cyan-600 na ɛyɛ

$cyan-700 na ɛyɛ

$cyan-800 na ɛyɛ

$cyan-900 na ɛyɛ

$a ɛyɛ fitaa-500#adb5bd na ɛwɔ hɔ

$a ɛyɛ fitaa-100

$a ɛyɛ fitaa-200

$a ɛyɛ fitaa-300

$a ɛyɛ fitaa-400

$a ɛyɛ fitaa-500

$a ɛyɛ fitaa-600

$a ɛyɛ fitaa-700

$a ɛyɛ fitaa-800

$a ɛyɛ fitaa-900

$a ɛyɛ tuntum#000 na ɛwɔ hɔ

$fitaa#fff

Nsɛm a wɔakyerɛw afa Sass ho

Sass ntumi nnyɛ programmatically generate variables, enti yɛde nsa yɛɛ variables maa tint ne shade biara yɛn ankasa. Yɛkyerɛ mfinimfini botae (sɛ nhwɛso no, $blue-500) na yɛde kɔla dwumadi ahorow a wɔahyɛ da ayɛ no di dwuma de yɛ yɛn kɔla ahorow no tint (yɛ hann) anaasɛ yɛde yɛ sunsuma (ma ɛyɛ sum) denam Sass mix()kɔla dwumadi no so.

Sɛ wode di dwuma mix()a, ɛnyɛ ade koro lighten()ne darken()—kan no de kɔla a wɔakyerɛ no fra fitaa anaa tuntum mu, bere a nea etwa to no sesa kɔla biara bo a ɛyɛ hare nkutoo. Nea efi mu ba ne kɔla ahorow a edi mũ kɛse, sɛnea wɔada no adi wɔ CodePen demo yi mu no .

Yɛn tint-color()ne shade-color()dwumadie ahodoɔ no de di dwuma mix()ka yɛn $theme-color-intervalnsakraeɛ no ho, a ɛkyerɛ anammɔn ɔha mu nkyekyɛmu boɔ ma kɔla biara a wɔadi afra a yɛyɛ. Hwɛ scss/_functions.scssne scss/_variables.scssfael ahorow no na woahu source code no nyinaa.

Kɔla Sass asase mfonini ahorow

Bootstrap no fibea Sass fael ahorow no wɔ map abiɛsa a ɛbɛboa wo ntɛmntɛm na ɛnyɛ den sɛ wobɛbɔ kɔla ahorow ne wɔn hex botae ahorow a wɔahyehyɛ no so.

$colorskyerɛw yɛn base ( 500) kɔla ahorow a ɛwɔ hɔ nyinaa din
$theme-colorskyerɛw asɛmti kɔla ahorow a wɔato din wɔ nkyerɛase mu nyinaa (wɔakyerɛ wɔ ase hɔ) .
$grayskyerɛw tint ne shades a ɛyɛ fitaa nyinaa din

Wɔ scss/_variables.scss, mu no, wubehu Bootstrap no kɔla nsakrae ne Sass map. $colorsSass asase mfonini no ho nhwɛso ni:

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

Fa gyinapɛn ahorow ka ho, yi, anaa sesa wɔ map no mu na ama woatumi ayɛ sɛnea wɔde di dwuma wɔ nneɛma afoforo pii mu no foforo. Awerɛhosɛm ne sɛ saa bere yi, ɛnyɛ component biara na ɛde Sass map yi di dwuma. Daakye nsɛm foforo bɛbɔ mmɔden sɛ ɛbɛma eyi atu mpɔn. Enkosi saa bere no, yɛ nhyehyɛe sɛ wode ${color}nsakrae ahorow no ne Sass asase mfonini yi bedi dwuma.

Nhwɛsoɔ

Sɛnea wubetumi de eyinom adi dwuma wɔ wo Sass mu ni:

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

Kɔla ne akyi mfaso adesua ahorow nso wɔ hɔ a wɔde besiesie colorna background-colorwɔde 500kɔla gyinapɛn ahorow no adi dwuma.

Nneɛma a wɔde di dwuma a wɔde yɛ adwuma

Wɔde aka ho wɔ v5.1.0 mu

Bootstrap nka colorne background-colormfasoɔ ma kɔla nsakraeɛ biara, nanso wobɛtumi ayɛ eyinom ankasa denam yɛn mfasoɔ API ne yɛn Sass map a wɔatrɛ mu a wɔde aka ho wɔ v5.1.0 mu.

Sɛ wopɛ sɛ wohyɛ aseɛ a, hwɛ sɛ wode yɛn dwumadie, nsakraeɛ, mixins, ne utilities no aba.
Fa yɛn map-merge-multiple()dwumadie no di dwuma fa ka Sass map ahodoɔ pii bom ntɛmntɛm wɔ map foforɔ mu.
Fa saa map foforo a wɔaka abom yi bom na fa {color}-{level}adesua din trɛw mfaso biara mu.

Nhwɛsoɔ bi a ɛma nsɛm kɔla mfasoɔ (sɛ nhwɛsoɔ, .text-purple-500) de atifi hɔ anammɔn no di dwuma nie.

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

Eyi bɛma wɔanya mfaso foforo .text-{color}-{level}ama kɔla ne level biara. Wubetumi ayɛ saa ara ama utility ne agyapade foforo biara nso.