Μεταβλητές CSS

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

Όλες οι προσαρμοσμένες ιδιότητές μας έχουν πρόθεμα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-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --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));
}

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

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

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

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

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

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

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