Reňk

Mowzuk reňkleri

Reňk shemalaryny döretmek üçin has kiçi reňk palitrasyny döretmek üçin ähli reňkleriň bir bölegini ulanýarys, Sass üýtgeýjileri we Bootstrap scss/_variables.scssfaýlynda Sass kartasy.

Bu reňkleriň hemmesi Sass kartasy hökmünde elýeterlidir , $theme-colors.

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

Bu reňkleri nädip üýtgetmelidigi barada Sass kartalarymyzy we aýlaw resminamalarymyzy gözden geçiriň .

Colorshli reňkler

Bootstrap reňkleriniň hemmesi Sass üýtgeýjileri we scss/_variables.scssfaýlda Sass kartasy hökmünde elýeterlidir. Faýl ululyklarynyň köpelmeginiň öňüni almak üçin, bu üýtgeýänleriň her biri üçin tekst ýa-da fon reňk synplaryny döretmeýäris. Munuň ýerine mowzuk palitrasy üçin bu reňkleriň bir bölegini saýlaýarys .

Reňkleri düzeniňizde kontrast derejelerine gözegçilik ediň. Aşakda görkezilişi ýaly, esasy reňkleriň hersine üç sany kontrast gatnaşygy goşduk - biri swatchyň häzirki reňkleri, biri ak reňk, beýlekisi gara reňk.

Sass barada bellikler

Sass programma taýdan üýtgeýjileri döredip bilmeýär, şonuň üçin her reňk üçin üýtgeýjileri el bilen döredip, özümize kölege berýäris. Orta nokadyň bahasyny kesgitleýäris (mysal üçin $blue-500) we Sassyň reňk funksiýasy arkaly reňklerimizi reňklemek (ýeňilleşdirmek) ýa-da kölegelemek (garalamak) üçin ýörite reňk funksiýalaryny ulanýarys mix().

Ulanmak mix()birmeňzeş däl lighten()we darken()- öňki görkezilen reňki ak ýa-da gara bilen garyşdyrýar, ikinjisi diňe her reňkiň ýeňillik bahasyny sazlaýar. Netijede , bu CodePen demosynda görkezilişi ýaly has doly reňkler toplumy .

Biziň tint-color()we shade-color()funksiýalarymyz , öndürýän her garyşyk reňk üçin basgançak göterim bahasyny kesgitleýän üýtgeýjimiz mix()bilen bilelikde ulanylýar. Doly çeşme kody üçin faýllara we faýllara $theme-color-intervalserediň .scss/_functions.scssscss/_variables.scss

Reňk Sass kartalary

“Bootstrap” -yň çeşmesi Sass faýllary, reňkleriň sanawyny we olaryň alty bahalaryny çalt we aňsatlyk bilen öwrenmäge kömek etmek üçin üç kartany öz içine alýar.

• $colorsbar bolan esasy ( 500) reňklerimizi görkezýär
• $theme-colorssemantiki taýdan atlandyrylan mowzuk reňkleriniň sanawyny görkezýär (aşakda görkezilýär)
• $graysçal reňkleriň we reňkleriň sanawyny görkezýär

Içinde scss/_variables.scssBootstrap reňk üýtgeýjilerini we Sass kartasyny taparsyňyz. $colorsSass kartasynyň mysaly :

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

Kartanyň içindäki bahalary goşuň, aýyryň ýa-da üýtgediň, beýleki köp böleklerde ulanylyşyny täzeläň. Gynansagam, häzirki wagtda her bir komponent bu Sass kartasyny ulanmaýar. Geljekdäki täzelenmeler bu meselede gowulaşmaga çalyşar. Oňa çenli ${color}üýtgeýänleri we bu Sass kartasyny ulanmagy meýilleşdiriň.

Mysal

Sass-da bulary nädip ulanyp bilersiňiz:

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

Reňk bahalaryny düzmek we ulanmak üçin reňk we fon peýdaly sapaklar hem bar .colorbackground-color500

Kärhanalary öndürmek

“Bootstrap ” her reňk üýtgeýjisi üçin peýdaly zatlary öz içine almaýar , ýöne bulary peýdaly APIcolor we v5.1.0-da goşulan giňeldilen Sass kartalarymyz bilen döredip bilersiňiz.background-color

1. Başlamak üçin, funksiýalarymyzy, üýtgeýänlerimizi, garyndylarymyzy we kömekçi hyzmatlarymyzy import edendigiňize göz ýetiriň.
2. map-merge-multiple()Birnäçe Sass kartasyny täze kartada çalt birleşdirmek üçin funksiýamyzy ulanyň .
3. {color}-{level}Synp ady bilen islendik peýdany giňeltmek üçin bu täze birleşdirilen kartany birleşdiriň .

.text-purple-500Ine , ýokardaky ädimleri ulanyp , tekst reňkini döredýän mysal (mysal üçin ).

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

.text-{color}-{level}Bu , her reňk we dereje üçin täze kömekçi enjamlary döreder. Islendik başga peýdaly we emläk üçin hem edip bilersiňiz.