Μεταβλητές CSS

Το Bootstrap περιλαμβάνει πολλές προσαρμοσμένες ιδιότητες (μεταβλητές) CSS στο μεταγλωττισμένο CSS του για προσαρμογή σε πραγματικό χρόνο χωρίς την ανάγκη εκ νέου μεταγλώττισης του Sass. Αυτά παρέχουν εύκολη πρόσβαση σε τιμές που χρησιμοποιούνται συνήθως, όπως τα χρώματα θέματος, τα σημεία διακοπής και οι κύριες στοίβες γραμματοσειρών όταν εργάζεστε στον επιθεωρητή του προγράμματος περιήγησής σας, σε ένα περιβάλλον δοκιμών κώδικα ή γενικά πρωτότυπα.

Όλες οι προσαρμοσμένες ιδιότητές μας έχουν πρόθεμαbs- για την αποφυγή διενέξεων με CSS τρίτων.

Μεταβλητές ρίζας

Εδώ είναι οι μεταβλητές που συμπεριλαμβάνουμε (σημειώστε ότι :rootαπαιτείται) στις οποίες μπορείτε να προσπελάσετε οπουδήποτε φορτωθεί το CSS του Bootstrap. Βρίσκονται στο _root.scssαρχείο μας και περιλαμβάνονται στα μεταγλωττισμένα αποστασιοποιημένα αρχεία μας.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Μεταβλητές συνιστωσών

Το Bootstrap 5 χρησιμοποιεί όλο και περισσότερο προσαρμοσμένες ιδιότητες ως τοπικές μεταβλητές για διάφορα στοιχεία. Με αυτόν τον τρόπο μειώνουμε το μεταγλωττισμένο CSS μας, διασφαλίζουμε ότι τα στυλ δεν κληρονομούνται σε μέρη όπως οι ένθετοι πίνακες και επιτρέπουμε κάποια βασική αναδιαμόρφωση και επέκταση των στοιχείων Bootstrap μετά τη μεταγλώττιση Sass.

Ρίξτε μια ματιά στην τεκμηρίωση του πίνακα μας για να μάθετε πώς χρησιμοποιούμε τις μεταβλητές CSS . Οι γραμμές πλοήγησής μας χρησιμοποιούν επίσης μεταβλητές CSS από την έκδοση 5.2.0. Χρησιμοποιούμε επίσης μεταβλητές CSS στα δίκτυά μας—κυρίως για υδρορροές το νέο πλέγμα επιλογής CSS— με περισσότερη χρήση στοιχείων στο μέλλον.

Όποτε είναι δυνατόν, θα εκχωρούμε μεταβλητές CSS στο βασικό επίπεδο στοιχείου (π.χ. .navbarγια τη γραμμή πλοήγησης και τα δευτερεύοντα στοιχεία του). Αυτό μειώνει τις εικασίες για το πού και τον τρόπο προσαρμογής και επιτρέπει εύκολες τροποποιήσεις από την ομάδα μας σε μελλοντικές ενημερώσεις.

Πρόθεμα

Οι περισσότερες μεταβλητές CSS χρησιμοποιούν ένα πρόθεμα για την αποφυγή συγκρούσεων με τη δική σας βάση κώδικα. Αυτό το πρόθεμα προστίθεται σε --αυτό που απαιτείται σε κάθε μεταβλητή CSS.

Προσαρμόστε το πρόθεμα μέσω της $prefixμεταβλητής Sass. Από προεπιλογή, έχει οριστεί σε bs-(σημειώστε την παύλα στο τέλος).

Παραδείγματα

Οι μεταβλητές CSS προσφέρουν παρόμοια ευελιξία με τις μεταβλητές του Sass, αλλά χωρίς την ανάγκη μεταγλώττισης πριν από την προβολή τους στο πρόγραμμα περιήγησης. Για παράδειγμα, εδώ επαναφέρουμε τη γραμματοσειρά και τα στυλ συνδέσμων της σελίδας μας με μεταβλητές CSS.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

Σημεία διακοπής πλέγματος

Ενώ συμπεριλαμβάνουμε τα σημεία διακοπής του πλέγματος μας ως μεταβλητές CSS (εκτός από το xs), έχετε υπόψη ότι οι μεταβλητές CSS δεν λειτουργούν σε ερωτήματα μέσων . Αυτό οφείλεται στο σχεδιασμό της προδιαγραφής CSS για τις μεταβλητές, αλλά μπορεί να αλλάξει τα επόμενα χρόνια με την υποστήριξη env()μεταβλητών. Δείτε αυτήν την απάντηση στο Stack Overflow για μερικούς χρήσιμους συνδέσμους. Στο μεταξύ, μπορείτε να χρησιμοποιήσετε αυτές τις μεταβλητές σε άλλες καταστάσεις CSS, καθώς και στο JavaScript σας.