loko

Loko lohahevitra

Mampiasa ampahany amin'ny loko rehetra izahay mba hamoronana palette miloko kely kokoa amin'ny famokarana loko, azo alaina ihany koa amin'ny maha-samihafa Sass sy sarintany Sass ao amin'ny scss/_variables.scssrakitra Bootstrap.

Ireo loko rehetra ireo dia azo alaina amin'ny sarintany Sass, $theme-colors.

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

Jereo ny sari-tanin'i Sass sy ny dosie loops momba ny fomba hanovana ireo loko ireo.

Ny loko rehetra

Ny loko Bootstrap rehetra dia azo alaina amin'ny maha-samihafa Sass sy sarintany Sass ao scss/_variables.scssanaty rakitra. Mba hialana amin'ny fitomboan'ny haben'ny rakitra dia tsy mamorona lahatsoratra na kilasy loko fototra ho an'ny tsirairay amin'ireo fari-pahalalana ireo izahay. Fa kosa, misafidy ampahany amin'ireo loko ireo ho an'ny palette lohahevitra izahay .

Aza hadino ny manara-maso ny tahan'ny fifanoherana rehefa manamboatra loko ianao. Araka ny aseho etsy ambany, dia nampiana fifanoherana telo tamin'ny loko lehibe tsirairay izahay—ny iray ho an'ny lokon'ny swatch amin'izao fotoana izao, ny iray manohitra ny fotsy ary ny iray manohitra ny mainty.

Fanamarihana momba ny Sass

Sass dia tsy afaka mamokatra varimbazaha amin'ny programa, noho izany dia namorona varimbazaha ho an'ny loko sy alokaloka rehetra izahay. Manondro ny sandan'ny teboka afovoany (oh, $blue-500) izahay ary mampiasa ny loko mahazatra mba hanamaivanana (hanamaivana) na hanalokaloka (manamaizina) ny lokonay amin'ny alàlan'ny mix()fiasan'ny lokon'i Sass.

Ny fampiasana mix()dia tsy mitovy amin'ny lighten()ary darken()— ny teo aloha dia mampifangaro ny loko voatondro amin'ny fotsy na mainty, fa ity farany kosa dia manitsy ny sandan'ny fahamaivanan'ny loko tsirairay. Ny vokatra dia loko feno kokoa, araka ny aseho amin'ity demo CodePen ity .

Ny antsika tint-color()sy ny shade-color()fiasa dia ampiasaina mix()miaraka amin'ny $theme-color-intervalfari-piainantsika, izay mamaritra ny sandan'ny isan-jato amin'ny loko mifangaro tsirairay avoakantsika. Jereo ny scss/_functions.scsssy ny scss/_variables.scssrakitra ho an'ny kaody loharano feno.

Color Sass sarintany

Ny rakitra Sass loharanon'ny Bootstrap dia misy sarintany telo hanampy anao haingana sy mora amin'ny lisitry ny loko sy ny sanda hex.

• $colorsmitanisa ny 500loko fototra rehetra () misy antsika
• $theme-colorsmitanisa ny loko lohahevitra rehetra nomena anarana (aseho etsy ambany)
• $graysmitanisa ny loko rehetra sy ny loko volondavenona

Ao anatin'ny scss/_variables.scss, dia ho hitanao ny fiovan'ny loko Bootstrap sy ny sarintany Sass. Ity misy ohatra iray amin'ny $colorssarintany 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
);

Ampio, esory, na ovao ny soatoavina ao anatin'ny sari-tany mba hanavaozana ny fomba ampiasana azy amin'ny singa maro hafa. Indrisy anefa fa tsy ny singa rehetra no mampiasa ity sari-tany Sass ity. Ny fanavaozana ho avy dia hiezaka hanatsara izany. Mandra-pahatongan'izany, mikasa ny hampiasa ireo ${color}fari-piainana sy ity sarintany Sass ity.

OHATRA

Ity ny fomba ahafahanao mampiasa ireto amin'ny Sass anao:

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

Ny kilasin'ny fampiasa amin'ny loko sy ny lamosina dia azo atao ihany koa amin'ny fametrahana colorsy background-colorfampiasana ny 500sandan'ny loko.

Mamorona fitaovana

Ny Bootstrap dia tsy ahitana colorsy background-colorfitaovana ho an'ny loko isan-karazany, fa azonao atao ny mamorona azy ireo miaraka amin'ny API fampiasanay sy ny sari-tany Sass miitatra ampiana amin'ny v5.1.0.

1. Hanombohana, ataovy azo antoka fa nanafatra ny fiasa, ny fari-piainanay, ny mixins ary ny kojakojay ianao.
2. Ampiasao ny map-merge-multiple()fiasantsika hanambatra haingana ny sari-tany Sass maromaro ao anaty sari-tany vaovao.
3. Ampifandraiso ity sari-tany mitambatra ity mba hanitarana ny fitaovana rehetra misy {color}-{level}anaram-pianarana.

Ity misy ohatra iray izay mamorona fitaovana miloko lahatsoratra (oh, .text-purple-500) amin'ny fampiasana ireo dingana etsy ambony.

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

Izany dia hamorona .text-{color}-{level}fitaovana vaovao ho an'ny loko sy ny ambaratonga rehetra. Afaka manao toy izany koa ianao amin'ny fitaovana sy fananana hafa.