Theming Bootstrap

Προσαρμόστε το Bootstrap 4 με τις νέες μας ενσωματωμένες μεταβλητές Sass για καθολικές προτιμήσεις στυλ για εύκολη αλλαγή θεμάτων και στοιχείων.

Εισαγωγή

Στο Bootstrap 3, η δημιουργία θεμάτων οδηγήθηκε σε μεγάλο βαθμό από παρακάμψεις μεταβλητών στο LESS, προσαρμοσμένο CSS και ένα ξεχωριστό φύλλο στυλ θέματος που συμπεριλάβαμε στα distαρχεία μας. Με λίγη προσπάθεια, θα μπορούσε κανείς να επανασχεδιάσει πλήρως την εμφάνιση του Bootstrap 3 χωρίς να αγγίξει τα βασικά αρχεία. Το Bootstrap 4 παρέχει μια οικεία, αλλά ελαφρώς διαφορετική προσέγγιση.

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

Sass

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

Δομή αρχείου

Όποτε είναι δυνατόν, αποφύγετε την τροποποίηση των βασικών αρχείων του Bootstrap. Για το Sass, αυτό σημαίνει ότι δημιουργείτε το δικό σας φύλλο στυλ που εισάγει το Bootstrap, ώστε να μπορείτε να το τροποποιήσετε και να το επεκτείνετε. Υποθέτοντας ότι χρησιμοποιείτε έναν διαχειριστή πακέτων όπως το npm, θα έχετε μια δομή αρχείου που μοιάζει με αυτό:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Εάν έχετε κατεβάσει τα αρχεία πηγής μας και δεν χρησιμοποιείτε διαχειριστή πακέτων, θα θέλετε να ρυθμίσετε με μη αυτόματο τρόπο κάτι παρόμοιο με αυτήν τη δομή, διατηρώντας τα αρχεία πηγής του Bootstrap ξεχωριστά από τα δικά σας.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Εισαγωγή

Στο custom.scss, θα εισαγάγετε τα πηγαία αρχεία Sass του Bootstrap. Έχετε δύο επιλογές: να συμπεριλάβετε όλο το Bootstrap ή να επιλέξετε τα εξαρτήματα που χρειάζεστε. Ενθαρρύνουμε το τελευταίο, αν και έχετε υπόψη ότι υπάρχουν ορισμένες απαιτήσεις και εξαρτήσεις στα στοιχεία μας. Θα χρειαστεί επίσης να συμπεριλάβετε κάποια JavaScript για τις προσθήκες μας.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Με αυτήν τη ρύθμιση, μπορείτε να αρχίσετε να τροποποιείτε οποιαδήποτε από τις μεταβλητές και τους χάρτες Sass στο custom.scss. Μπορείτε επίσης να αρχίσετε να προσθέτετε τμήματα του Bootstrap κάτω από την // Optionalενότητα όπως απαιτείται. Προτείνουμε να χρησιμοποιήσετε την πλήρη στοίβα εισαγωγής από το bootstrap.scssαρχείο μας ως σημείο εκκίνησης.

Μεταβλητές προεπιλογές

Κάθε μεταβλητή Sass στο Bootstrap περιλαμβάνει τη !defaultσημαία που σας επιτρέπει να παρακάμψετε την προεπιλεγμένη τιμή της μεταβλητής στο δικό σας Sass χωρίς να τροποποιήσετε τον πηγαίο κώδικα του Bootstrap. Αντιγράψτε και επικολλήστε μεταβλητές όπως απαιτείται, τροποποιήστε τις τιμές τους και αφαιρέστε τη !defaultσημαία. Εάν μια μεταβλητή έχει ήδη εκχωρηθεί, τότε δεν θα εκχωρηθεί ξανά από τις προεπιλεγμένες τιμές στο Bootstrap.

Θα βρείτε την πλήρη λίστα με τις μεταβλητές του Bootstrap στο scss/_variables.scss. Ορισμένες μεταβλητές έχουν οριστεί σε null, αυτές οι μεταβλητές δεν εξάγουν την ιδιότητα εκτός εάν παρακαμφθούν στη διαμόρφωσή σας.

Οι παρακάμψεις μεταβλητών πρέπει να έρχονται μετά την εισαγωγή των συναρτήσεων, των μεταβλητών και των μικτών μας, αλλά πριν από τις υπόλοιπες εισαγωγές.

Ακολουθεί ένα παράδειγμα που αλλάζει το background-colorκαι colorγια το <body>κατά την εισαγωγή και τη μεταγλώττιση του Bootstrap μέσω npm:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Επαναλάβετε όπως απαιτείται για οποιαδήποτε μεταβλητή στο Bootstrap, συμπεριλαμβανομένων των καθολικών επιλογών παρακάτω.

Χάρτες και βρόχοι

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

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

Τροποποίηση χάρτη

Για να τροποποιήσετε ένα υπάρχον χρώμα στον $theme-colorsχάρτη μας, προσθέστε τα ακόλουθα στο προσαρμοσμένο αρχείο Sass:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Προσθήκη στον χάρτη

Για να προσθέσετε ένα νέο χρώμα στο $theme-colors, προσθέστε το νέο κλειδί και την τιμή:

$theme-colors: (
  "custom-color": #900
);

Αφαίρεση από τον χάρτη

Για να αφαιρέσετε χρώματα από $theme-colors, ή οποιονδήποτε άλλο χάρτη, χρησιμοποιήστε το map-remove. Λάβετε υπόψη ότι πρέπει να το εισαγάγετε μεταξύ των απαιτήσεων και των επιλογών μας:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Απαιτούμενα κλειδιά

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

Για παράδειγμα, χρησιμοποιούμε τα κλειδιά primary, success, και dangerαπό $theme-colorsγια συνδέσμους, κουμπιά και καταστάσεις φόρμας. Η αντικατάσταση των τιμών αυτών των κλειδιών δεν θα πρέπει να παρουσιάζει προβλήματα, αλλά η κατάργησή τους μπορεί να προκαλέσει προβλήματα με τη συλλογή του Sass. Σε αυτές τις περιπτώσεις, θα χρειαστεί να τροποποιήσετε τον κώδικα Sass που χρησιμοποιεί αυτές τις τιμές.

Λειτουργίες

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

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Αυτά σας επιτρέπουν να επιλέξετε ένα χρώμα από έναν χάρτη Sass όπως ακριβώς θα χρησιμοποιούσατε μια μεταβλητή χρώματος από το v3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Έχουμε επίσης μια άλλη λειτουργία για τη λήψη ενός συγκεκριμένου επιπέδου χρώματος από τον $theme-colorsχάρτη. Οι τιμές αρνητικού επιπέδου θα φωτίσουν το χρώμα, ενώ τα υψηλότερα επίπεδα θα σκουρύνουν.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Στην πράξη, θα καλούσατε τη συνάρτηση και θα περάσατε σε δύο παραμέτρους: το όνομα του χρώματος από $theme-colors(π.χ. πρωτεύον ή επικίνδυνο) και ένα αριθμητικό επίπεδο.

.custom-element {
  color: theme-color-level(primary, -10);
}

Θα μπορούσαν να προστεθούν πρόσθετες λειτουργίες στο μέλλον ή το δικό σας προσαρμοσμένο Sass για να δημιουργήσετε συναρτήσεις επιπέδου για πρόσθετους χάρτες Sass ή ακόμα και μια γενική, εάν θέλετε να είστε πιο αναλυτικοί.

Αντίθεση χρώματος

Μια επιπλέον λειτουργία που περιλαμβάνουμε στο Bootstrap είναι η λειτουργία αντίθεσης χρωμάτων, color-yiq. Χρησιμοποιεί τον χρωματικό χώρο YIQ για να επιστρέψει αυτόματα ένα ανοιχτό ( #fff) ή σκούρο ( #111) χρώμα αντίθεσης με βάση το καθορισμένο βασικό χρώμα. Αυτή η λειτουργία είναι ιδιαίτερα χρήσιμη για μίξεις ή βρόχους όπου δημιουργείτε πολλές κλάσεις.

Για παράδειγμα, για τη δημιουργία χρωματικών δειγμάτων από τον $theme-colorsχάρτη μας:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Μπορεί επίσης να χρησιμοποιηθεί για εφάπαξ ανάγκες αντίθεσης:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Μπορείτε επίσης να καθορίσετε ένα βασικό χρώμα με τις λειτουργίες χρωματικού χάρτη μας:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Escape SVG

Χρησιμοποιούμε τη escape-svgσυνάρτηση για να ξεφύγουμε από τους <χαρακτήρες >και #για τις εικόνες φόντου SVG. Αυτοί οι χαρακτήρες πρέπει να διαφύγουν για να αποδώσουν σωστά τις εικόνες φόντου στον IE. Κατά τη χρήση της escape-svgσυνάρτησης, τα URI δεδομένων πρέπει να αναφέρονται.

Συναρτήσεις πρόσθεσης και αφαίρεσης

Χρησιμοποιούμε τις συναρτήσεις addκαι subtractγια να τυλίξουμε τη calcσυνάρτηση CSS. Ο πρωταρχικός σκοπός αυτών των συναρτήσεων είναι η αποφυγή σφαλμάτων όταν μια τιμή "χωρίς μονάδα" 0μεταβιβάζεται σε μια calcέκφραση. Οι εκφράσεις όπως calc(10px - 0)θα επιστρέψουν ένα σφάλμα σε όλα τα προγράμματα περιήγησης, παρόλο που είναι μαθηματικά σωστές.

Παράδειγμα όπου ισχύει ο υπολογισμός:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Παράδειγμα όπου ο υπολογισμός δεν είναι έγκυρος:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Sass επιλογές

Προσαρμόστε το Bootstrap 4 με το ενσωματωμένο αρχείο προσαρμοσμένων μεταβλητών μας και αλλάξτε εύκολα τις καθολικές προτιμήσεις CSS με νέες $enable-*μεταβλητές Sass. Αντικαταστήστε την τιμή μιας μεταβλητής και μεταγλωττίστε ξανά npm run testόπως απαιτείται.

Μπορείτε να βρείτε και να προσαρμόσετε αυτές τις μεταβλητές για βασικές καθολικές επιλογές στο scss/_variables.scssαρχείο του Bootstrap.

Χρώμα

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

Ολα τα ΧΡΩΜΑΤΑ

Όλα τα χρώματα που είναι διαθέσιμα στο Bootstrap 4, είναι διαθέσιμα ως μεταβλητές Sass και ένας χάρτης Sass στο scss/_variables.scssαρχείο. Αυτό θα επεκταθεί σε επόμενες μικρές εκδόσεις για να προσθέσετε επιπλέον αποχρώσεις, όπως η παλέτα κλίμακας του γκρι που ήδη περιλαμβάνουμε.

Δείτε πώς μπορείτε να τα χρησιμοποιήσετε στο Sass σας:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Διατίθενται επίσης κατηγορίες βοηθητικών χρωμάτωνcolor για ρύθμιση και background-color.

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

Χρησιμοποιούμε ένα υποσύνολο όλων των χρωμάτων για να δημιουργήσουμε μια μικρότερη χρωματική παλέτα για τη δημιουργία συνδυασμών χρωμάτων, διαθέσιμη επίσης ως μεταβλητές Sass και χάρτη Sass στο scss/_variables.scssαρχείο του Bootstrap.

Γκρι

Ένα εκτεταμένο σύνολο γκρι μεταβλητών και ένας χάρτης Sass scss/_variables.scssγια σταθερές αποχρώσεις του γκρι σε όλο το έργο σας. Σημειώστε ότι πρόκειται για «ψυχρά γκρι», που τείνουν προς έναν διακριτικό μπλε τόνο, αντί για ουδέτερο γκρι.

Μέσα 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
) !default;

Προσθέστε, αφαιρέστε ή τροποποιήστε τιμές εντός του χάρτη για να ενημερώσετε τον τρόπο χρήσης τους σε πολλά άλλα στοιχεία. Δυστυχώς αυτή τη στιγμή, δεν χρησιμοποιούν όλα τα στοιχεία αυτόν τον χάρτη Sass. Οι μελλοντικές ενημερώσεις θα προσπαθήσουν να το βελτιώσουν. Μέχρι τότε, σχεδιάστε να χρησιμοποιήσετε τις ${color}μεταβλητές και αυτόν τον χάρτη Sass.

Συστατικά

Πολλά από τα στοιχεία και τα βοηθητικά προγράμματα του Bootstrap είναι χτισμένα με @eachβρόχους που επαναλαμβάνονται σε έναν χάρτη Sass. Αυτό είναι ιδιαίτερα χρήσιμο για τη δημιουργία παραλλαγών ενός στοιχείου από εμάς $theme-colorsκαι τη δημιουργία παραλλαγών που αποκρίνονται για κάθε σημείο διακοπής. Καθώς προσαρμόζετε αυτούς τους χάρτες Sass και κάνετε εκ νέου μεταγλώττιση, θα βλέπετε αυτόματα τις αλλαγές σας να αντικατοπτρίζονται σε αυτούς τους βρόχους.

Τροποποιητές

Πολλά από τα στοιχεία του Bootstrap είναι κατασκευασμένα με μια προσέγγιση κλάσης βασικού τροποποιητή. Αυτό σημαίνει ότι το μεγαλύτερο μέρος του στυλ περιέχεται σε μια βασική κλάση (π.χ., .btn) ενώ οι παραλλαγές στυλ περιορίζονται σε κατηγορίες τροποποιητών (π.χ., .btn-danger). Αυτές οι κατηγορίες τροποποιητών δημιουργούνται από τον $theme-colorsχάρτη για να προσαρμόσουν τον αριθμό και το όνομα των κατηγοριών τροποποιητών μας.

Ακολουθούν δύο παραδείγματα του τρόπου με τον οποίο κάνουμε βρόχο στον $theme-colorsχάρτη για να δημιουργήσουμε τροποποιητές στο .alertστοιχείο και σε όλα τα .bg-*βοηθητικά προγράμματα στο παρασκήνιο.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Ευαίσθητος

Αυτοί οι βρόχοι Sass δεν περιορίζονται επίσης στους έγχρωμους χάρτες. Μπορείτε επίσης να δημιουργήσετε παραλλαγές απόκρισης των στοιχείων ή των βοηθητικών προγραμμάτων σας. Πάρτε για παράδειγμα τα βοηθητικά προγράμματα ευθυγράμμισης κειμένου που αποκρίνονται, όπου αναμιγνύουμε έναν @eachβρόχο για τον $grid-breakpointsχάρτη Sass με ένα ερώτημα πολυμέσων που περιλαμβάνει.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Εάν χρειαστεί να τροποποιήσετε το $grid-breakpoints, οι αλλαγές σας θα εφαρμοστούν σε όλους τους βρόχους που επαναλαμβάνονται σε αυτόν τον χάρτη.

Μεταβλητές CSS

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

Διαθέσιμες μεταβλητές

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

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

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

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

Μεταβλητές σημείου διακοπής

Αν και αρχικά συμπεριλάβαμε σημεία διακοπής στις μεταβλητές μας CSS (π.χ. --breakpoint-md), αυτά δεν υποστηρίζονται σε ερωτήματα πολυμέσων , αλλά μπορούν ακόμα να χρησιμοποιηθούν σε σύνολα κανόνων σε ερωτήματα πολυμέσων. Αυτές οι μεταβλητές σημείου διακοπής παραμένουν στο μεταγλωττισμένο CSS για συμβατότητα προς τα πίσω, δεδομένου ότι μπορούν να χρησιμοποιηθούν από JavaScript. Μάθετε περισσότερα στις προδιαγραφές .

Ακολουθεί ένα παράδειγμα του τι δεν υποστηρίζεται:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Και εδώ είναι ένα παράδειγμα του τι υποστηρίζεται:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}