Kulur

Kuluri tat-tema

Aħna nużaw subsett tal-kuluri kollha biex noħolqu paletta tal-kuluri iżgħar biex niġġeneraw skemi ta 'kuluri, disponibbli wkoll bħala varjabbli Sass u mappa Sass fil- scss/_variables.scssfajl ta' Bootstrap.

Dawn il-kuluri kollha huma disponibbli bħala mappa Sass $theme-colors,.

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

Iċċekkja l -mapep u l-loops tagħna ta’ Sass għal kif timmodifika dawn il-kuluri.

Kuluri kollha

Il-kuluri kollha tal-Bootstrap huma disponibbli bħala varjabbli Sass u mappa Sass fil- scss/_variables.scssfajl. Biex nevitaw iż-żieda fid-daqsijiet tal-fajls, aħna ma noħolqux klassijiet tal-kulur tat-test jew tal-isfond għal kull waħda minn dawn il-varjabbli. Minflok, nagħżlu subsett ta 'dawn il-kuluri għal paletta ta' temi .

Kun żgur li tissorvelja l-proporzjonijiet tal-kuntrast hekk kif tippersonalizza l-kuluri. Kif muri hawn taħt, żidna tliet proporzjonijiet ta 'kuntrast għal kull wieħed mill-kuluri ewlenin—wieħed għall-kuluri attwali tal-kampjun, wieħed kontra l-abjad, u wieħed kontra l-iswed.

Noti dwar Sass

Sass ma jistax jiġġenera varjabbli b'mod programmatiku, għalhekk ħloqna manwalment varjabbli għal kull lewn u dell lilna nfusna. Aħna nispeċifikaw il-valur tal-punt tan-nofs (eż., $blue-500) u nużaw funzjonijiet tal-kulur tad-dwana biex intewnu (itħaffef) jew tilfu (jiskuraw) il-kuluri tagħna permezz tal mix()-funzjoni tal-kulur ta 'Sass.

L- użu mix()mhuwiex l-istess bħal lighten()u darken()—tal-ewwel iħallat il-kulur speċifikat bl-abjad jew bl-iswed, filwaqt li l-aħħar jaġġusta biss il-valur tad-dawl ta 'kull kulur. Ir-riżultat huwa sett ta 'kuluri ħafna aktar komplut, kif muri f'din id-demo CodePen .

Il-funzjonijiet tagħna tint-color()u shade-color()l-użu mix()flimkien mal- $theme-color-intervalvarjabbli tagħna, li jispeċifika valur perċentwali imkabbar għal kull kulur imħallat li nipproduċu. Ara l- scss/_functions.scssu scss/_variables.scssfajls għall-kodiċi tas-sors sħiħ.

Mapep tal-Kulur Sass

Is-sors tal-fajls Sass ta' Bootstrap jinkludu tliet mapep biex jgħinuk tgħaddi malajr u faċilment fuq lista ta' kuluri u l-valuri hex tagħhom.

• $colorstelenka l- 500kuluri bażi ( ) disponibbli kollha tagħna
• $theme-colorstelenka l-kuluri kollha tat-tema bl-isem semantika (li jidhru hawn taħt)
• $graystelenka l-lewn u l-ilwien kollha tal-griż

Fi ħdan scss/_variables.scss, issib il-varjabbli tal-kulur ta' Bootstrap u l-mappa ta' Sass. Hawn eżempju tal- $colorsmappa Sass:

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

Żid, neħħi jew immodifika valuri fil-mappa biex taġġorna kif jintużaw f'ħafna komponenti oħra. Sfortunatament f'dan iż-żmien, mhux kull komponent juża din il-mappa Sass. Aġġornamenti futuri se jagħmlu ħilithom biex itejbu dan. Sa dakinhar, ippjana li tagħmel użu mill- ${color}varjabbli u din il-mappa Sass.

Eżempju

Hawn kif tista' tuża dawn fis-Sass tiegħek:

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

Il -klassijiet tal-utilità tal- kulur u l- isfondcolor huma wkoll disponibbli għall-issettjar u background-colorl-użu tal- 500valuri tal-kulur.

Ġenerazzjoni ta' utilitajiet

Bootstrap ma jinkludix coloru background-colorutilitajiet għal kull varjabbli tal-kulur, iżda tista 'tiġġenera dawn lilek innifsek bl- API ta' utilità tagħna u l-mapep Sass estiżi tagħna miżjuda f'v5.1.0.

1. Biex tibda, kun żgur li importajt il-funzjonijiet, il-varjabbli, il-mixins u l-utilitajiet tagħna.
2. Uża l- map-merge-multiple()funzjoni tagħna biex tgħaqqad malajr diversi mapep Sass flimkien f'mappa ġdida.
3. Għaqqad din il-mappa magħquda ġdida biex testendi kwalunkwe utilità {color}-{level}b'isem ta 'klassi.

Hawn eżempju li jiġġenera utilitajiet tal-kulur tat-test (eż., .text-purple-500) bl-użu tal-passi ta 'hawn fuq.

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

Dan se jiġġenera .text-{color}-{level}utilitajiet ġodda għal kull kulur u livell. Tista 'tagħmel l-istess għal kwalunkwe utilità u proprjetà oħra wkoll.