Μεταβλητές 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-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", Arial, "Noto Sans", "Liberation Sans", 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;
}

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

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

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

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

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

Οι μεταβλητές 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 σας.