Àwọ̀

Awọn awọ akori

A lo ipin kan ti gbogbo awọn awọ lati ṣẹda paleti awọ ti o kere fun ṣiṣẹda awọn ero awọ, tun wa bi awọn oniyipada Sass ati maapu Sass kan ninu scss/_variables.scssfaili Bootstrap.

Gbogbo awọn awọ wọnyi wa bi maapu Sass, $theme-colors.

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

Ṣayẹwo awọn maapu Sass wa ati awọn docs loops fun bi o ṣe le yipada awọn awọ wọnyi.

Gbogbo awọn awọ

Gbogbo awọn awọ Bootstrap wa bi awọn oniyipada Sass ati maapu Sass kan ninu scss/_variables.scssfaili. Lati yago fun awọn iwọn faili ti o pọ si, a ko ṣẹda ọrọ tabi awọn kilasi awọ abẹlẹ fun ọkọọkan awọn oniyipada wọnyi. Dipo, a yan ipin kan ti awọn awọ wọnyi fun paleti akori kan .

Rii daju lati ṣe atẹle awọn ipin itansan bi o ṣe n ṣatunṣe awọn awọ. Gẹgẹbi a ti han ni isalẹ, a ti ṣafikun awọn ipin itansan mẹta si ọkọọkan awọn awọ akọkọ-ọkan fun awọn awọ lọwọlọwọ swatch, ọkan lodi si funfun, ati ọkan fun lodi si dudu.

Awọn akọsilẹ lori Sass

Sass ko le ṣe ipilẹṣẹ awọn oniyipada ni eto, nitorinaa a ṣẹda awọn oniyipada pẹlu ọwọ fun gbogbo tint ati iboji ara wa. A pato iye midpoint (fun apẹẹrẹ, $blue-500) ati lo awọn iṣẹ awọ aṣa lati tint (imọlẹ) tabi iboji (ṣokunkun) awọn awọ wa nipasẹ iṣẹ mix()awọ Sass.

Lilo mix()kii ṣe kanna bii lighten()ati darken()- iṣaju ṣe idapọ awọ ti a sọ pato pẹlu funfun tabi dudu, lakoko ti igbehin nikan n ṣatunṣe iye ina ti awọ kọọkan. Abajade jẹ suite awọn awọ pipe diẹ sii, bi a ṣe han ninu demo CodePen yii .

Wa tint-color()ati shade-color()awọn iṣẹ lo mix()lẹgbẹẹ $theme-color-intervaloniyipada wa, eyiti o ṣalaye iye ipin ogorun kan fun awọ idapọmọra kọọkan ti a ṣe. Wo scss/_functions.scssati scss/_variables.scssawọn faili fun koodu orisun ni kikun.

Awọn maapu Sass awọ

Awọn faili Sass orisun Bootstrap pẹlu awọn maapu mẹta lati ṣe iranlọwọ fun ọ ni iyara ati irọrun lupu lori atokọ ti awọn awọ ati awọn iye hex wọn.

• $colorsṣe atokọ gbogbo awọn awọ ipilẹ ti o wa ( 500).
• $theme-colorsṣe atokọ gbogbo awọn awọ akori ti a darukọ ni itumọ-ọrọ (ti o han ni isalẹ)
• $graysṣe akojọ gbogbo awọn tints ati awọn ojiji ti grẹy

Ninu scss/_variables.scss, iwọ yoo rii awọn oniyipada awọ Bootstrap ati maapu Sass. Eyi ni apẹẹrẹ ti $colorsmaapu 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
);

Ṣafikun, yọkuro, tabi ṣatunṣe awọn iye laarin maapu lati ṣe imudojuiwọn bi wọn ṣe nlo ni ọpọlọpọ awọn paati miiran. Laanu ni akoko yii, kii ṣe gbogbo paati lo maapu Sass yii. Awọn imudojuiwọn ọjọ iwaju yoo tiraka lati ni ilọsiwaju lori eyi. Titi di igba naa, gbero lori lilo awọn ${color}oniyipada ati maapu Sass yii.

Apeere

Eyi ni bii o ṣe le lo awọn wọnyi ninu Sass rẹ:

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

Awọ ati awọn kilasi IwUlO lẹhin tun wa fun eto colorati background-colorlilo awọn 500iye awọ.

Ṣiṣe awọn ohun elo

Bootstrap ko pẹlu colorati background-colorawọn ohun elo fun gbogbo oniyipada awọ, ṣugbọn o le ṣe ina wọnyi funrararẹ pẹlu API IwUlO wa ati awọn maapu Sass ti o gbooro sii ti a ṣafikun ni v5.1.0.

1. Lati bẹrẹ, rii daju pe o ti gbe wọle awọn iṣẹ wa, awọn oniyipada, awọn apopọ, ati awọn ohun elo.
2. Lo map-merge-multiple()iṣẹ wa lati yara dapọ ọpọlọpọ awọn maapu Sass papọ ni maapu tuntun kan.
3. Darapọ mọ maapu apapọ tuntun yii lati faagun eyikeyi ohun elo pẹlu {color}-{level}orukọ kilasi kan.

Eyi ni apẹẹrẹ ti o ṣe agbejade awọn ohun elo awọ ọrọ (fun apẹẹrẹ, .text-purple-500) ni lilo awọn igbesẹ loke.

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

Eyi yoo ṣe ina awọn .text-{color}-{level}ohun elo tuntun fun gbogbo awọ ati ipele. O le ṣe kanna fun eyikeyi ohun elo miiran ati ohun-ini daradara.