Өнгө

Сэдвийн өнгө

Бид өнгөний схемийг үүсгэхийн тулд жижиг өнгөт палитр үүсгэхийн тулд бүх өнгөний дэд багцыг ашигладаг бөгөөд үүнийг Sass хувьсагч болон Bootstrap scss/_variables.scssфайл дахь Sass газрын зураг хэлбэрээр ашиглах боломжтой.

Эдгээр бүх өнгө нь Sass газрын зураг, $theme-colors.

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

Эдгээр өнгийг хэрхэн өөрчлөх талаар манай Sass газрын зураг, гогцооны баримт бичгүүдийг үзнэ үү .

Бүх өнгө

Бүх Bootstrap өнгийг Sass хувьсагч болон scss/_variables.scssфайл дахь Sass газрын зураг хэлбэрээр авах боломжтой. Файлын хэмжээг нэмэгдүүлэхээс зайлсхийхийн тулд бид эдгээр хувьсагч бүрт текст эсвэл дэвсгэр өнгөний анги үүсгэдэггүй. Оронд нь бид загвар палитрт эдгээр өнгөний дэд багцыг сонгоно .

Өнгийг өөрчлөхдөө тодосгогч харьцааг хянахаа мартуузай. Доор үзүүлсэн шиг бид үндсэн өнгө тус бүр дээр гурван тодосгогч харьцааг нэмсэн: нэг нь дээжийн одоогийн өнгө, нэг нь цагаан, нөгөө нь хар өнгөтэй байна.

Сасс дээрх тэмдэглэл

Sass программчлан хувьсагч үүсгэх боломжгүй тул бид өөрсдийн гараар өнгө, сүүдэр бүрт хувьсагч үүсгэсэн. Бид дунд цэгийн утгыг (жишээ нь, $blue-500) зааж өгч, Sass-ийн өнгөний функцээр дамжуулан өөрсдийн өнгийг будах (цайруулах) эсвэл сүүдэрлэх (харанхуй болгох) тулд тусгай mix()өнгөт функцуудыг ашигладаг.

Ашиглах mix()нь ижил биш бөгөөд lighten()эхнийх darken()нь заасан өнгийг цагаан эсвэл хар өнгөтэй хольдог бол сүүлийнх нь зөвхөн өнгө бүрийн цайвар байдлын утгыг тохируулдаг. Үр дүн нь CodePen-ийн үзүүлэн дээр үзүүлсэн шиг илүү бүрэн өнгөт багц юм .

Бидний tint-color()болон shade-color()функцууд нь бидний үйлдвэрлэсэн холимог өнгө бүрийн шаталсан хувийн утгыг тодорхойлдог хувьсагчийн хажууд mix()ашиглагддаг . Бүрэн эх кодыг болон файлуудаас $theme-color-intervalүзнэ үү .scss/_functions.scssscss/_variables.scss

Өнгөт Sass газрын зураг

Bootstrap-ийн эх сурвалж Sass файлууд нь өнгөний жагсаалт болон тэдгээрийн зургаан өнцөгт утгыг хурдан бөгөөд хялбар эргүүлэхэд туслах гурван газрын зургийг агуулдаг.

• $colors500бидний боломжтой бүх үндсэн ( ) өнгийг жагсаав
• $theme-colorsБүх утгын нэрлэсэн сэдвийн өнгийг жагсаав (доор харуулав)
• $graysсаарал өнгөний бүх өнгө, сүүдрийг жагсаав

Дотор scss/_variables.scssнь та Bootstrap-ийн өнгөт хувьсагч болон Sass газрын зургийг олох болно. $colorsСасс газрын зургийн жишээ энд байна :

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

Газрын зураг дээрх утгуудыг нэмэх, хасах эсвэл өөр олон бүрэлдэхүүн хэсгүүдэд хэрхэн ашиглагдаж байгааг шинэчлэх. Харамсалтай нь одоогоор бүрэлдэхүүн хэсэг бүр энэ Сасс газрын зургийг ашигладаггүй. Ирээдүйн шинэчлэлтүүд үүнийг сайжруулахыг хичээх болно. Тэр болтол ${color}хувьсагч болон энэхүү Сасс газрын зургийг ашиглахаар төлөвлөж байгаарай.

Жишээ

Та эдгээрийг Sass дээрээ хэрхэн ашиглаж болохыг эндээс үзнэ үү:

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

Өнгөний утгыг тохируулах , ашиглахад зориулсан өнгө , дэвсгэр хэрэгслийн ангиуд бас байдаг .colorbackground-color500

Хэрэглээ үүсгэх

Bootstrap нь өнгөт хувьсагч бүрийн хэрэгслүүд colorболон хэрэгслүүдийг агуулдаггүй ч та манай API хэрэглүүр болон v5.1.0-д нэмсэн өргөтгөсөн Sass газрын зургийн background-colorтусламжтайгаар эдгээрийг өөрөө үүсгэж болно .

1. Эхлэхийн тулд та манай функц, хувьсагч, холимог болон хэрэгслүүдийг импортолсон эсэхээ шалгаарай.
2. map-merge-multiple()Олон Sass газрын зургийг шинэ газрын зураг дээр хурдан нэгтгэхийн тулд манай функцийг ашиглана уу.
3. {color}-{level}Ангийн нэртэй дурын хэрэгслийг өргөтгөхийн тулд энэ шинэ хосолсон газрын зургийг нэгтгэнэ үү .

.text-purple-500Дээрх алхмуудыг ашиглан текстийн өнгөт хэрэглүүр (жишээ нь, ) үүсгэдэг жишээ энд байна.

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

Энэ нь .text-{color}-{level}өнгө, түвшин бүрт шинэ хэрэгслүүд үүсгэх болно. Та бусад хэрэгсэл, үл хөдлөх хөрөнгийн хувьд ч мөн адил зүйлийг хийж болно.