Ɲɛ

Barokun kulɛriw

An bɛ baara Kɛ ni kulɛri bɛɛ kulu fitinin dɔ ye walasa ka kulɛri fitinin dɔ Dabɔ walasa ka kulɛriw labɛn, o fana bɛ Sɔrɔ i n’a fɔ Sass fɛn caman sɛgɛsɛgɛli ani Sass karti Bootstrap ka scss/_variables.scssdosiye kɔnɔ.

Nin kulɛri ninnu bɛɛ bɛ sɔrɔ i n’a fɔ Sass karti, $theme-colors.

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

Aw ye an ka Sass maps and loops docs lajɛ walasa ka nin kulɛriw ladilan cogo min na.

Kulɛriw bɛɛ

Bootstrap kulɛriw bɛɛ bɛ sɔrɔ i n’a fɔ Sass variables ani Sass map in scss/_variables.scssfile. Walasa ka dɔ fara dosiye hakɛw kan, an tɛ sɛbɛnni walima kɔkanna kulɛri kalasiw Dabɔ o fɛn caman ɲɔgɔnna kelen-kelen bɛɛ kama. O nɔ na, ​​an bɛ o kulɛriw kulu fitinin dɔ sugandi barokun palɛti dɔ kama .

Aw ye aw jija ka danfara hakɛw kɔlɔsi ni aw bɛ kulɛriw labɛn ka kɛɲɛ ni aw yɛrɛ sago ye. I n’a fɔ a jiralen bɛ cogo min na jukɔrɔ, an ye danfara saba fara kulɛri kunbaba kelen-kelen bɛɛ kan—kelen ye swatch ka kulɛriw ye minnu bɛ yen sisan, kelen ye fin ye, kelen ye nɛrɛ ye.

Kɔlɔsiliw Sass kan

Sass tɛ Se ka fɛn caman sɛgɛsɛgɛli Kɛ porogaramu fɛ, o de kama an ye fɛn caman Dabɔ ni bolo ye tintin ni biɲɛ kelen-kelen bɛɛ kama an yɛrɛ ye. An bɛ cɛmancɛ-yɔrɔ nafa jira (misali la, $blue-500) ani ka baara kɛ ni kulɛri baarakɛcogo ladamulenw ye walasa ka an ka kulɛriw tintin (ka yeelen bɔ) walima ka u bonya (ka dibi) Sass ka mix()kulɛri baarakɛcogo fɛ.

Baara kɛli mix()ni lighten()ani darken()—fɔlɔ bɛ kulɛri kofɔlen ɲagami ni finman walima nɛrɛmuguma ye, k’a sɔrɔ filanan bɛ kulɛri kelen-kelen bɛɛ nɔgɔya nafa dɔrɔn de ladilan. O kɔlɔlɔ ye kulɛriw suite dafalen ye kosɛbɛ, i n’a fɔ a jiralen bɛ cogo min na nin CodePen demo in kɔnɔ .

An ka tint-color()ni shade-color()baarakɛcogo bɛ baara Kɛ mix()an ka $theme-color-intervalfɛn caman sɛgɛsɛgɛli kɛrɛfɛ, o min bɛ kɛmɛsarada la nafa dɔ Jira an bɛ min Bɔ kulɛri ɲagaminen kelen-kelen bɛɛ la. Aw ye scss/_functions.scssani scss/_variables.scssfilenw lajɛ walasa ka kunnafoni sɔrɔyɔrɔ dafalen sɔrɔ.

Kulɛri Sass ka kartiw

Bootstrap ka source Sass files kɔnɔ, karti saba bɛ yen minnu b’i dɛmɛ ka teliya ani ka loop kɛ kulɛriw lisɛli kan ani u hex values.

• $colorsbɛ an ka basigi ( 500) kulɛriw bɛɛ jira minnu bɛ sɔrɔ
• $theme-colorsbɛ barokun kulɛriw bɛɛ tɔgɔ fɔ kɔrɔko siratigɛ la (a jiralen bɛ jukɔrɔ) .
• $graysbɛ ɲɛgɛnw ni ɲɛgɛnw bɛɛ lajɛlen jira

, kɔnɔ scss/_variables.scss, i bɛ Bootstrap ka kulɛri caman ɲɔgɔnna sɔrɔ ani Sass karti. $colorsSass karti misali dɔ filɛ nin ye :

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

Nafaw fara ɲɔgɔn kan, ka bɔ yen, walima ka fɛn dɔw sɛmɛntiya karti kɔnɔ walasa ka u baaracogo kura ye yɔrɔ caman wɛrɛw la. A fɔ man di nka nin waati in na, yɔrɔ bɛɛ tɛ baara kɛ ni Sass karti in ye. Kuma kura nataw bɛna an jija ka ɲɛtaa kɛ o ko la. Fɔ ka se o waati ma, aw bɛ labɛn kɛ ka baara kɛ ni ${color}fɛn caman sɛgɛsɛgɛli ye ani nin Sass karti in.

Misaliya

Aw bɛ se ka baara kɛ ni ninnu ye cogo min na aw ka Sass kɔnɔ, o filɛ nin ye:

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

Kulɛri ni kɔkanna nafama kalanw fana bɛ sɔrɔ walasa ka kulɛri nafaw sigi colorani ka background-colorbaara kɛ ni u ye.500

Nafamafɛnw sɔrɔli

Bootstrap tɛ colorni background-colornafalanw ye kulɛri caman ɲɔgɔnna bɛɛ la, nka i bɛ se ka ninnu labɛn i yɛrɛ ye ni an ka nafamafɛnw API ye ani an ka Sass kartiw janyalenw faralen ɲɔgɔn kan v5.1.0 kɔnɔ.

1. Walasa ka daminɛ, aw ye aw jija ka an ka baarakɛcogo, fɛn caman sɛgɛsɛgɛli, mixins ani nafamafɛnw don.
2. Baara kɛ n’an ka map-merge-multiple()baarakɛcogo ye walasa ka Sass karti caman fara ɲɔgɔn kan teliya la karti kura kɔnɔ.
3. Nin karti faralen kura in fara ɲɔgɔn kan walasa ka nafamafɛn o nafalan janya ni {color}-{level}kalasi tɔgɔ ye.

Misali dɔ filɛ nin ye min bɛ sɛbɛnni kulɛri nafalanw (misali la, .text-purple-500) lawuli ni sanfɛla fɛɛrɛw ye.

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

O bɛna nafamafɛn kuraw lawuli .text-{color}-{level}kulɛri ni hakɛ bɛɛ la. Aw bɛ se k’o ɲɔgɔn kɛ nafamafɛn wɛrɛw ni nafolo wɛrɛw fana na.