Χρώμα

Χρώματα θέματος

Χρησιμοποιούμε ένα υποσύνολο όλων των χρωμάτων για να δημιουργήσουμε μια μικρότερη χρωματική παλέτα για τη δημιουργία συνδυασμών χρωμάτων, διαθέσιμη επίσης ως μεταβλητές 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

Τα πηγαία αρχεία Sass του Bootstrap περιλαμβάνουν τρεις χάρτες για να σας βοηθήσουν να κάνετε γρήγορη και εύκολη αναζήτηση μιας λίστας χρωμάτων και των εξαγωνικών τιμών τους.

• $colorsπαραθέτει όλα τα διαθέσιμα βασικά ( 500) χρώματα
• $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τιμών χρώματος.

Δημιουργία βοηθητικών προγραμμάτων

Προστέθηκε στην έκδοση 5.1.0

Το Bootstrap δεν περιλαμβάνει colorκαι background-colorβοηθητικά προγράμματα για κάθε μεταβλητή χρώματος, αλλά μπορείτε να τα δημιουργήσετε μόνοι σας με το βοηθητικό μας API και τους εκτεταμένους χάρτες Sass που προστέθηκαν στην έκδοση 5.1.0.

1. Για να ξεκινήσετε, βεβαιωθείτε ότι έχετε εισαγάγει τις συναρτήσεις, τις μεταβλητές, τα mixins και τα βοηθητικά προγράμματα μας.
2. Χρησιμοποιήστε τη map-merge-multiple()λειτουργία μας για να συγχωνεύσετε γρήγορα πολλούς χάρτες Sass σε έναν νέο χάρτη.
3. Συγχωνεύστε αυτόν τον νέο συνδυασμένο χάρτη για να επεκτείνετε οποιοδήποτε βοηθητικό πρόγραμμα με {color}-{level}όνομα κλάσης.

Ακολουθεί ένα παράδειγμα που δημιουργεί βοηθητικά προγράμματα χρώματος κειμένου (π.χ. .text-purple-500) χρησιμοποιώντας τα παραπάνω βήματα.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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}βοηθητικά προγράμματα για κάθε χρώμα και επίπεδο. Μπορείτε να κάνετε το ίδιο και για οποιοδήποτε άλλο βοηθητικό πρόγραμμα και ιδιοκτησία.