Mmala

Mebala ea sehlooho

Re sebelisa sehlopha sa mebala eohle ho theha phalete e nyane ea mebala bakeng sa ho hlahisa meralo ea mebala, e fumanehang hape e le mefuta ea Sass le 'mapa oa Sass scss/_variables.scssfaeleng ea Bootstrap.

Mebala ena kaofela e fumaneha joalo ka 'mapa oa Sass $theme-colors,.

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

Sheba limmapa tsa rona tsa Sass le loops docs mabapi le mokhoa oa ho fetola mebala ena.

Mebala eohle

Mebala eohle ea Bootstrap e fumaneha e le mefuta ea Sass le 'mapa oa Sass scss/_variables.scssfaeleng. Ho qoba ho eketseha ha boholo ba lifaele, ha re thehe litlelase tsa mongolo kapa mebala ea bokamorao bakeng sa mefuta ena e fapaneng. Ho e-na le hoo, re khetha sehlotšoana sa mebala ena bakeng sa phalete ea sehlooho .

Etsa bonnete ba hore u beha leihlo likarohano tsa phapang ha u ntse u etsa mebala. Joalo ka ha ho bonts'itsoe ka tlase, re kentse likarohano tse tharo tse fapaneng ho o mong le o mong oa mebala e meholo-o mong e le oa mebala ea hona joale ea swatch, o mong bakeng sa khahlano le bosoeu, o mong khahlano le botšo.

Lintlha tse mabapi le Sass

Sass ha e khone ho hlahisa mefuta e fapaneng ka mokhoa o hlophisitsoeng, ka hona, ka borona re thehile mefuta e fapaneng bakeng sa lesela le moriti le leng le le leng. Re hlakisa boleng ba midpoint (mohlala, $blue-500) 'me re sebelisa mebala e tloahelehileng ho tebisa (ho khantša) kapa ho fifatsa (ho fifatsa) mebala ea rona ka mix()tšebetso ea mebala ea Sass.

Tšebeliso mix()ha e tšoane lighten()le darken()—ea pele e kopanya ’mala o boletsoeng le o mosoeu kapa o motšo, athe oa morao o fetola feela boleng ba ho khanya ba ’mala o mong le o mong. Sephetho ke mefuta e mengata e felletseng ea mebala, joalo ka ha ho bontšitsoe setšoantšong sena sa CodePen .

Our tint-color()le shade-color()ditshebetso di sebedisa mix()hammoho le ho $theme-color-intervalfeto-fetoha ha rona, e leng se bolelang palo e phahameng ea peresente bakeng sa 'mala o mong le o mong o tsoakiloeng oo re o hlahisang. Sheba scss/_functions.scssle scss/_variables.scsslifaele bakeng sa khoutu e felletseng ea mohloli.

Limmapa tsa mebala ea Sass

Lifaele tsa Sass tsa Bootstrap li kenyelletsa limmapa tse tharo ho u thusa kapele le ha bonolo ho theola lethathamo la mebala le boleng ba tsona ba hex.

• $colorse thathamisa mebala eohle ea rona e fumanehang ( 500)
• $theme-colorse thathamisa mebala eohle ea sehlooho e nang le mabitso (e bontšitsoeng ka tlase)
• $grayse thathamisa mebala eohle le meriti ea bohlooho

Ka har'a scss/_variables.scss, u tla fumana mefuta e fapaneng ea mebala ea Bootstrap le 'mapa oa Sass. Mohlala oa $colors'mapa oa Sass ke ona:

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

Kenya, tlosa, kapa u fetole boleng ka har'a 'mapa ho ntlafatsa mokhoa oa ho sebelisoa likarolong tse ling tse ngata. Ka bomalimabe nakong ena, ha se karolo e 'ngoe le e 'ngoe e sebelisang 'mapa ona oa Sass. Lintlafatso tse tlang li tla leka ho ntlafatsa ho sena. Ho fihlela ka nako eo, rera ho sebelisa ${color}mefuta-futa le 'mapa ona oa Sass.

Mohlala

U ka sebelisa tsena joang ho Sass ea hau:

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

Litlelase tsa tšebeliso ea mebala le bokamorao li teng bakeng sa ho beha colorle background-colorho sebelisa 500boleng ba mebala.

Ho hlahisa lisebelisoa

Bootstrap ha e kenyelle colorle background-colorlisebelisoa bakeng sa phapang e 'ngoe le e' ngoe ea mebala, empa u ka iketsetsa tsona ka lisebelisoa tsa rona tsa API le limmapa tsa rona tse atolositsoeng tsa Sass tse kentsoeng ho v5.1.0.

1. Ho qala, etsa bonnete ba hore o kentse mesebetsi ea rona, mefuta e fapaneng, metsoako, le lisebelisoa.
2. Sebelisa map-merge-multiple()mosebetsi oa rona ho kopanya kapele limmapa tse ngata tsa Sass 'mapeng o mocha.
3. Kopanya 'mapa ona o mocha o kopaneng ho holisa ts'ebeliso efe kapa efe ka {color}-{level}lebitso la sehlopha.

Mohlala ke ona o hlahisang lisebelisoa tsa mebala ea mongolo (mohlala, .text-purple-500) ho sebelisa mehato e kaholimo.

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

Sena se tla hlahisa .text-{color}-{level}lisebelisoa tse ncha bakeng sa 'mala o mong le o mong le boemo. U ka etsa se tšoanang bakeng sa lisebelisoa tse ling le thepa hape.