Mtundu

Mitundu yamutu

Timagwiritsa ntchito kagawo kakang'ono kamitundu yonse kuti tipange utoto wocheperako popanga masikimu amitundu, omwe amapezekanso ngati mitundu ya Sass ndi mapu a Sass mufayilo ya Bootstrap scss/_variables.scss.

Mitundu yonseyi ikupezeka ngati mapu a Sass $theme-colors,.

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

Onani mamapu athu a Sass ndi loops docs momwe mungasinthire mitundu iyi.

Mitundu yonse

Mitundu yonse ya Bootstrap ilipo ngati mitundu ya Sass ndi mapu a Sass mufayilo scss/_variables.scss. Kuti tipewe kukula kwa mafayilo, sitipanga makalasi amtundu wamtundu kapena wakumbuyo pamitundu yonseyi. M'malo mwake, timasankha kagawo kakang'ono ka mitundu iyi papaleti yamutu .

Onetsetsani kuti mukuyang'anira kusiyanitsa kosiyana pamene mukusintha mitundu. Monga tawonetsera m'munsimu, tawonjeza mitundu itatu yosiyana ku mtundu uliwonse waukulu—imodzi yamitundu yaposachedwa ya mawotchi, ina yotsutsa yoyera, ndi ina yakuda.

Zolemba pa Sass

Sass sangathe kupanga zosinthika mwadongosolo, chifukwa chake tidapanga zosinthika patokha ndi mthunzi uliwonse. Timatchula mtengo wapakati (mwachitsanzo, $blue-500) ndikugwiritsa ntchito mitundu yamitundu kuti tiunikire (kuwalitsa) kapena kutidetsa (kuda) mitundu yathu kudzera pamitundu ya Sass mix().

Kugwiritsira ntchito mix()sikufanana lighten()ndi darken()—choyambacho chimasakaniza mtundu wotchulidwawo ndi woyera kapena wakuda, pamene chotsiriziracho chimangosintha kupepuka kwa mtundu uliwonse. Zotsatira zake ndi mitundu yambiri yamitundu, monga momwe ziwonetsedwera mu chiwonetsero cha CodePen ichi .

Zathu tint-color()ndi shade-color()ntchito zimagwiritsa ntchito mix()limodzi ndi $theme-color-intervalkusintha kwathu, komwe kumatanthawuza kuchuluka kwa mtengo wamtundu uliwonse womwe timapanga. Onani scss/_functions.scssndi scss/_variables.scssmafayilo amtundu wathunthu.

Mapu amtundu wa Sass

Mafayilo a Sass a Bootstrap ali ndi mamapu atatu okuthandizani kuti muzitha kuzungulira mndandanda wamitundu ndi ma hex ake.

• $colorsimatchula mitundu yathu yonse yopezeka ( 500)
• $theme-colorsimatchula mitundu yonse yamutu wamutu (yosonyezedwa pansipa)
• $graysamalemba mitundu yonse yamitundu ndi imvi

Mkati scss/_variables.scss, mupeza mitundu yamitundu ya Bootstrap ndi mapu a Sass. Nachi chitsanzo cha $colorsmapu a Sass:

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

Onjezani, chotsani, kapena sinthani zinthu zomwe zili mkati mwamapu kuti zisinthe momwe zimagwiritsidwira ntchito m'zigawo zina zambiri. Tsoka ilo panthawiyi, sizinthu zonse zomwe zimagwiritsa ntchito mapu a Sass. Zosintha zamtsogolo zidzayesetsa kukonza izi. Mpaka pamenepo, konzekerani kugwiritsa ntchito ${color}zosinthika ndi mapu a Sass awa.

Chitsanzo

Umu ndi momwe mungagwiritsire ntchito izi mu Sass yanu:

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

Makasitomala amtundu ndi zakumbuyo amapezekanso pakukhazikitsa colorndikugwiritsa background-colorntchito 500mitundu yamitundu.

Kupanga zida

Yowonjezedwa mu v5.1.0

Bootstrap sichiphatikiza colorndi background-colorzofunikira pamitundu iliyonse, koma mutha kupanga nokha ndi API yathu yogwiritsira ntchito komanso mamapu athu owonjezera a Sass omwe adawonjezedwa mu v5.1.0.

1. Kuti muyambe, onetsetsani kuti mwatumiza kunja ntchito zathu, zosintha, zosakaniza, ndi zofunikira.
2. Gwiritsani map-merge-multiple()ntchito ntchito yathu kuphatikiza mamapu angapo a Sass pamodzi pamapu atsopano.
3. Gwirizanitsani mapu atsopanowa kuti muwonjezere zofunikira zilizonse ndi {color}-{level}dzina lakalasi.

Nachi chitsanzo chomwe chimapanga zida zamitundu yamalemba (mwachitsanzo, .text-purple-500) pogwiritsa ntchito njira zomwe zili pamwambapa.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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";

Izi zipanga zida zatsopano .text-{color}-{level}pamtundu uliwonse komanso mulingo uliwonse. Mutha kuchitanso chimodzimodzi pazinthu zina zilizonse komanso katundu.