Dath

Dathan cuspair

Bidh sinn a’ cleachdadh fo-sheata de gach dath gus paileas dath nas lugha a chruthachadh airson sgeamaichean dath a ghineadh, cuideachd ri fhaighinn mar chaochladairean Sass agus mapa Sass ann am scss/_variables.scssfaidhle Bootstrap.

Tha na dathan sin uile rim faighinn mar mhapa Sass, $theme-colors.

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

Thoir sùil air na mapaichean Sass agus na docaichean lùban againn airson mar as urrainn dhut na dathan sin atharrachadh.

A h-uile dathan

Tha a h-uile dath Bootstrap ri fhaighinn mar chaochladairean Sass agus mapa Sass ann am scss/_variables.scssfaidhle. Gus meudan faidhle nas motha a sheachnadh, cha bhith sinn a’ cruthachadh clasaichean dath teacsa no cùl-raoin airson gach aon de na caochladairean sin. An àite sin, bidh sinn a’ taghadh fo-sheata de na dathan sin airson paileas cuspair .

Dèan cinnteach gun cùm thu sùil air co-mheasan eadar-dhealaichte fhad ‘s a bhios tu a’ gnàthachadh dathan. Mar a chithear gu h-ìosal, tha sinn air trì co-mheasan eadar-dhealaichte a chuir ri gach prìomh dhathan - aon airson dathan gnàthach an t-swatch, aon airson an aghaidh geal, agus aon airson an aghaidh dubh.

Notaichean air Sass

Chan urrainn dha Sass caochladairean a ghineadh gu prògramach, agus mar sin chruthaich sinn caochladairean le làimh airson a h-uile dath agus sgàil sinn fhìn. Bidh sinn a’ sònrachadh luach meadhan-phuing (me, $blue-500) agus a’ cleachdadh gnìomhan dath àbhaisteach gus na dathan againn a dhath (lasachadh) no dubhar (dorcha) tro mix()ghnìomh dath Sass.

Chan eil cleachdadh mix()an aon rud ri lighten()agus darken()- bidh a’ chiad fhear a’ measgachadh an dath ainmichte le geal no dubh, agus chan eil an tè mu dheireadh ag atharrachadh ach luach aotromachd gach dath. Is e an toradh sreath de dhhathan tòrr nas coileanta, mar a chithear san demo CodePen seo .

Bidh na gnìomhan againn tint-color()agus na shade-color()gnìomhan againn a’ cleachdadh mix()còmhla ris a’ $theme-color-intervalchaochladair againn, a tha a’ sònrachadh luach ceudad ceumnaichte airson gach dath measgaichte a bhios sinn a’ dèanamh. Faic na faidhlichean scss/_functions.scssagus na scss/_variables.scssfaidhlichean airson a’ chòd stòr slàn.

Mapaichean dath Sass

Tha trì mapaichean ann am faidhlichean Sass stòr Bootstrap gus do chuideachadh le bhith a’ lùbadh gu sgiobalta agus gu furasta thairis air liosta de dhhathan agus na luachan hex aca.

• $colorsa’ liostadh na 500dathan bunaiteach ( ) a tha rim faighinn againn
• $theme-colorsa’ liostadh a h-uile dath cuspair ainmichte gu semantach (ri fhaicinn gu h-ìosal)
• $graysag ainmeachadh a h-uile dath agus dath liath

Taobh a-staigh scss/_variables.scss, lorgaidh tu caochladairean dath Bootstrap agus mapa Sass. Seo eisimpleir de $colorsmhapa 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
);

Cuir ris, thoir air falbh no atharraich luachan taobh a-staigh a’ mhapa gus ùrachadh mar a bhios iad gan cleachdadh ann am mòran phàirtean eile. Gu mì-fhortanach aig an àm seo, chan eil a h- uile pàirt a’ cleachdadh a’ mhapa Sass seo. Bidh ùrachaidhean san àm ri teachd a’ feuchainn ri seo a leasachadh. Gu ruige sin, planadh air cleachdadh nan ${color}caochladairean agus am mapa Sass seo.

eisimpleir

Seo mar a chleachdas tu iad sin nad Sass:

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

Tha clasaichean goireasan dath is cùl -fhiosrachaidh rim faighinn cuideachd airson luachan dath a shuidheachadh coloragus background-colora chleachdadh .500

A 'cruthachadh ghoireasan

Chan eil Bootstrap a’ toirt a-steach coloragus background-colorgoireasan airson gach caochladair dath, ach faodaidh tu iad sin a ghineadh leis an API goireasach againn agus na mapaichean Sass leudaichte againn air an cur ris ann an v5.1.0.

1. Gus tòiseachadh, dèan cinnteach gu bheil thu air ar gnìomhan, caochladairean, measgachadh agus goireasan a thoirt a-steach.
2. Cleachd ar map-merge-multiple()gnìomh gus grunn mhapaichean Sass a chur còmhla gu sgiobalta ann am mapa ùr.
3. Cuir còmhla am mapa ùr seo gus goireas sam bith a leudachadh le {color}-{level}ainm clas.

Seo eisimpleir a bhios a’ gineadh goireasan dath teacsa (me, .text-purple-500) a’ cleachdadh nan ceumannan gu h-àrd.

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

Ginidh seo .text-{color}-{level}goireasan ùra airson gach dath agus ìre. Faodaidh tu an aon rud a dhèanamh airson goireas agus seilbh sam bith eile cuideachd.