Ɲɛ
Bootstrap bɛ dɛmɛ ni kulɛri caman ye min bɛ an ka cogoyaw ni an ka yɔrɔw barokunw di. O bɛ kɛ sababu ye ka fɛn caman kɛ ka kɛɲɛ ni mɔgɔw sago ye ani ka fɛnw fara ɲɔgɔn kan porozɛ o porozɛ kama.
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.scss
dosiye 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.scss
file. 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-interval
fɛ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.scss
ani scss/_variables.scss
filenw 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.
$colors
bɛ an ka basigi (500
) kulɛriw bɛɛ jira minnu bɛ sɔrɔ$theme-colors
bɛ barokun kulɛriw bɛɛ tɔgɔ fɔ kɔrɔko siratigɛ la (a jiralen bɛ jukɔrɔ) .$grays
bɛ ɲɛ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. $colors
Sass 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,
"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 color
ani ka background-color
baara kɛ ni u ye.500