ფერი

თემის ფერები

ჩვენ ვიყენებთ ყველა ფერის ქვეჯგუფს, რათა შევქმნათ უფრო პატარა ფერის პალიტრა ფერთა სქემების გენერირებისთვის, ასევე ხელმისაწვდომია როგორც Sass ცვლადები და Sass რუკა Bootstrap-ის scss/_variables.scssფაილში.

ყველა ეს ფერი ხელმისაწვდომია 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-ს არ შეუძლია ცვლადების პროგრამულად გენერირება, ამიტომ ჩვენ ხელით შევქმენით ცვლადები ყველა ელფერისა და ჩრდილისთვის. ჩვენ განვსაზღვრავთ შუა წერტილის მნიშვნელობას (მაგ., $blue-500) და ვიყენებთ მორგებული ფერის ფუნქციებს ჩვენი ფერების გასაფერადებლად (გამნათებლად) ან დაჩრდილვისთვის (დაბნელებისთვის) Sass-ის mix()ფერის ფუნქციის საშუალებით.

გამოყენება mix()არ არის იგივე, რაც lighten()და darken()— პირველი აერთიანებს მითითებულ ფერს თეთრთან ან შავთან, ხოლო მეორე მხოლოდ არეგულირებს თითოეული ფერის სიმსუბუქის მნიშვნელობას. შედეგი არის ფერების ბევრად უფრო სრულყოფილი ნაკრები, როგორც ნაჩვენებია CodePen-ის ამ დემო ვერსიაში .

ჩვენი tint-color()და shade-color()ფუნქციები გამოიყენება mix()ჩვენს $theme-color-intervalცვლადთან ერთად, რომელიც განსაზღვრავს საფეხურების პროცენტულ მნიშვნელობას თითოეული შერეული ფერისთვის, რომელსაც ჩვენ ვაწარმოებთ. იხილეთ scss/_functions.scssდა scss/_variables.scssფაილები სრული წყაროს კოდისთვის.

ფერადი Sass რუკები

Bootstrap-ის წყარო Sass ფაილები მოიცავს სამ რუკას, რომელიც დაგეხმარებათ სწრაფად და მარტივად გადახედოთ ფერების სიას და მათ თექვსმეტობითი მნიშვნელობების.

• $colorsჩამოთვლის ყველა ჩვენს ხელმისაწვდომ საბაზისო ( 500) ფერს
• $theme-colorsჩამოთვლის ყველა სემანტიკურად დასახელებულ თემის ფერს (ქვემოთ ნაჩვენები)
• $graysჩამოთვლილია ნაცრისფერის ყველა ელფერი და ელფერი

შიგნით scss/_variables.scss, თქვენ იპოვით Bootstrap-ის ფერის ცვლადებს და Sass რუკას. აი $colorsSass რუკის მაგალითი:

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

დაამატეთ, წაშალეთ ან შეცვალეთ მნიშვნელობები რუკაში, რათა განაახლოთ მათი გამოყენება ბევრ სხვა კომპონენტში. სამწუხაროდ, ამ დროისთვის, ყველა კომპონენტი არ იყენებს ამ Sass რუკას. მომავალი განახლებები შეეცდება გააუმჯობესოს ეს. მანამდე, დაგეგმეთ ${color}ცვლადების და ამ Sass რუკის გამოყენება.

მაგალითი

აი, როგორ შეგიძლიათ გამოიყენოთ ისინი თქვენს Sass-ში:

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

ფერისა და ფონის სასარგებლო კლასები ასევე ხელმისაწვდომია ფერის მნიშვნელობების დასაყენებლად colorდა background-colorგამოსაყენებლად .500

კომუნალური საშუალებების გენერირება

Bootstrap არ შეიცავს colorდა background-colorყველა ფერის ცვლადის კომუნალურ პროგრამებს, მაგრამ თქვენ შეგიძლიათ თავად შექმნათ ისინი ჩვენი სასარგებლო API- ით და ჩვენი გაფართოებული Sass რუკებით, რომლებიც დამატებულია v5.1.0-ში.

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}კომუნალურ პროგრამებს ყველა ფერისა და დონისთვის. თქვენ შეგიძლიათ იგივე გააკეთოთ ნებისმიერი სხვა კომუნალური და ქონებისთვისაც.