Ранги

Рангҳои мавзӯъ

Мо зермаҷмӯаи ҳама рангҳоро барои сохтани палитраи хурдтари рангҳо барои тавлиди схемаҳои рангӣ истифода мебарем, ки ҳамчун тағирёбандаҳои Sass ва харитаи Sass дар scss/_variables.scssфайли Bootstrap низ дастрасанд.

Ҳамаи ин рангҳо ҳамчун харитаи Sass дастрасанд $theme-colors.

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

Барои тағир додани ин рангҳо , харитаҳои Sass ва ҳуҷҷатҳои ҳалқаҳои моро санҷед.

Ҳама рангҳо

Ҳама рангҳои Bootstrap ҳамчун тағирёбандаҳои Sass ва харитаи Sass дар scss/_variables.scssфайл дастрасанд. Барои пешгирӣ кардани андозаи файлҳои зиёд, мо барои ҳар яке аз ин тағирёбандаҳо синфҳои матн ё ранги замина эҷод намекунем. Ба ҷои ин, мо зермаҷмӯи ин рангҳоро барои палитраи мавзӯъ интихоб мекунем .

Ҳангоми танзими рангҳо ҳатман таносуби контрастро назорат кунед. Тавре ки дар зер нишон дода шудааст, мо ба ҳар як рангҳои асосӣ се таносуби контраст илова кардем - яке барои рангҳои ҷории намуна, дигаре барои сафед ва дигаре барои сиёҳ.

Қайдҳо дар бораи Sass

Sass наметавонад ба таври барномавӣ тағирёбандаҳоро тавлид кунад, аз ин рӯ мо худамон барои ҳар як ранг ва соя тағирёбандаҳоро дастӣ эҷод кардем. Мо арзиши миёнаи нуқтаро муайян мекунем (масалан, $blue-500) ва функсияҳои рангҳои фармоиширо барои ранг кардан (сабук кардан) ё соя кардан (торик кардан) рангҳои моро тавассути mix()функсияи рангии Sass истифода мебарем.

Истифодаи mix()он якхела нест lighten()ва darken()-валӣ ранги муайянро бо сафед ё сиёҳ омехта мекунад, дар ҳоле ки охирин танҳо арзиши равшании ҳар як рангро танзим мекунад. Дар натиҷа маҷмӯи пурратари рангҳо, тавре ки дар ин намоиши CodePen нишон дода шудааст .

Функсияҳои мо tint-color()ва shade-color()функсияҳои mix()мо дар баробари $theme-color-intervalтағирёбандаи мо истифода мешаванд, ки барои ҳар як ранги омехтае, ки мо истеҳсол мекунем, арзиши фоизи қадамро муайян мекунад. Барои рамзи пурраи манбаъ ба файлҳо scss/_functions.scssнигаред .scss/_variables.scss

Харитаҳои ранги Sass

Файлҳои манбаи Bootstrap Sass се харитаро дар бар мегиранд, ки ба шумо дар рӯйхати рангҳо ва арзишҳои шашгонаи онҳо зуд ва ба осонӣ давр задан кӯмак мерасонанд.

• $colors500ҳамаи рангҳои асосиро ( ) дастраси моро номбар мекунад
• $theme-colorsҳамаи рангҳои мавзӯъро номбар мекунад (дар зер нишон дода шудааст)
• $graysтамоми рангҳо ва сояҳои хокистариро номбар мекунад

Дар дохили scss/_variables.scss, шумо тағирёбандаҳои ранги Bootstrap ва харитаи Sass-ро хоҳед ёфт. Ин аст як мисоли $colorsхаритаи 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
);

Арзишҳоро дар харита илова кунед, хориҷ кунед ё тағир диҳед, то ки чӣ тавр онҳо дар бисёр ҷузъҳои дигар истифода шаванд. Мутаассифона, дар айни замон, на ҳама ҷузъҳо ин харитаи Sass-ро истифода мебаранд. Навсозиҳои оянда кӯшиш мекунанд, ки инро беҳтар созанд. То он вақт, истифодаи ${color}тағирёбандаҳо ва ин харитаи Sass-ро ба нақша гиред.

Мисол

Ин аст, ки чӣ тавр шумо метавонед инҳоро дар Sass-и худ истифода баред:

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

Синфҳои утилитаҳои ранг ва замина инчунин барои танзим colorва background-colorистифодаи 500арзишҳои ранг дастрасанд.