Sass
Χρησιμοποιήστε τα πηγαία αρχεία Sass για να επωφεληθείτε από μεταβλητές, χάρτες, mixins και λειτουργίες που θα σας βοηθήσουν να δημιουργήσετε πιο γρήγορα και να προσαρμόσετε το έργο σας.
Χρησιμοποιήστε τα πηγαία αρχεία Sass για να επωφεληθείτε από μεταβλητές, χάρτες, mixins και πολλά άλλα.
Δομή αρχείου
Όποτε είναι δυνατόν, αποφύγετε την τροποποίηση των βασικών αρχείων του 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
Με αυτήν τη ρύθμιση, μπορείτε να αρχίσετε να τροποποιείτε οποιαδήποτε από τις μεταβλητές και τους χάρτες 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:
// Required
@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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Επαναλάβετε όπως απαιτείται για οποιαδήποτε μεταβλητή στο Bootstrap, συμπεριλαμβανομένων των καθολικών επιλογών παρακάτω.
Χάρτες και βρόχοι
Το Bootstrap περιλαμβάνει μια χούφτα χαρτών Sass, ζεύγη βασικών τιμών που διευκολύνουν τη δημιουργία οικογενειών σχετικών CSS. Χρησιμοποιούμε χάρτες Sass για τα χρώματά μας, τα σημεία διακοπής πλέγματος και πολλά άλλα. Ακριβώς όπως οι μεταβλητές Sass, όλοι οι χάρτες Sass περιλαμβάνουν τη !default
σημαία και μπορούν να παρακαμφθούν και να επεκταθούν.
Ορισμένοι από τους χάρτες Sass μας συγχωνεύονται σε κενούς από προεπιλογή. Αυτό γίνεται για να επιτραπεί η εύκολη επέκταση ενός δεδομένου χάρτη Sass, αλλά έχει το κόστος να κάνει την αφαίρεση στοιχείων από έναν χάρτη λίγο πιο δύσκολη.
Τροποποίηση χάρτη
Όλες οι μεταβλητές στον $theme-colors
χάρτη ορίζονται ως αυτόνομες μεταβλητές. Για να τροποποιήσετε ένα υπάρχον χρώμα στον $theme-colors
χάρτη μας, προσθέστε τα ακόλουθα στο προσαρμοσμένο αρχείο Sass:
$primary: #0074d9;
$danger: #ff4136;
Αργότερα, αυτές οι μεταβλητές ορίζονται στον $theme-colors
χάρτη του Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Προσθήκη στον χάρτη
Προσθέστε νέα χρώματα στο $theme-colors
, ή σε οποιονδήποτε άλλο χάρτη, δημιουργώντας έναν νέο χάρτη Sass με τις προσαρμοσμένες τιμές σας και συγχωνεύοντάς τον με τον αρχικό χάρτη. Σε αυτήν την περίπτωση, θα δημιουργήσουμε έναν νέο $custom-colors
χάρτη και θα τον συγχωνεύσουμε με το $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Αφαίρεση από τον χάρτη
Για να αφαιρέσετε χρώματα από $theme-colors
, ή οποιονδήποτε άλλο χάρτη, χρησιμοποιήστε το map-remove
. Λάβετε υπόψη ότι πρέπει να το εισαγάγετε μεταξύ των απαιτήσεων και των επιλογών μας:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Απαιτούμενα κλειδιά
Το Bootstrap προϋποθέτει την παρουσία ορισμένων συγκεκριμένων κλειδιών στους χάρτες Sass καθώς τα χρησιμοποιούσαμε και τα επεκτείναμε μόνοι μας. Καθώς προσαρμόζετε τους χάρτες που περιλαμβάνονται, ενδέχεται να αντιμετωπίσετε σφάλματα όταν χρησιμοποιείται ένα συγκεκριμένο κλειδί χάρτη Sass.
Για παράδειγμα, χρησιμοποιούμε τα κλειδιά primary
, success
, και danger
από $theme-colors
για συνδέσμους, κουμπιά και καταστάσεις φόρμας. Η αντικατάσταση των τιμών αυτών των κλειδιών δεν θα πρέπει να παρουσιάζει προβλήματα, αλλά η κατάργησή τους μπορεί να προκαλέσει προβλήματα με τη συλλογή του Sass. Σε αυτές τις περιπτώσεις, θα χρειαστεί να τροποποιήσετε τον κώδικα Sass που χρησιμοποιεί αυτές τις τιμές.
Λειτουργίες
Χρωματιστά
Δίπλα στους χάρτες Sass που έχουμε, τα χρώματα θεμάτων μπορούν επίσης να χρησιμοποιηθούν ως αυτόνομες μεταβλητές, όπως $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Μπορείτε να φωτίσετε ή να σκουρύνετε τα χρώματα με το Bootstrap tint-color()
και τις shade-color()
λειτουργίες. Αυτές οι λειτουργίες θα αναμειγνύουν τα χρώματα με το μαύρο ή το λευκό, σε αντίθεση με τις εγγενείς λειτουργίες lighten()
και τις darken()
λειτουργίες του Sass που αλλάζουν τη φωτεινότητα κατά ένα σταθερό ποσό, το οποίο συχνά δεν οδηγεί στο επιθυμητό αποτέλεσμα.
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
Στην πράξη, θα καλούσατε τη συνάρτηση και θα περάσατε τις παραμέτρους χρώματος και βάρους.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Αντίθεση χρώματος
Για να πληρούνται τα πρότυπα προσβασιμότητας WCAG 2.0 για χρωματική αντίθεση , οι συγγραφείς πρέπει να παρέχουν λόγο αντίθεσης τουλάχιστον 4,5:1 , με πολύ λίγες εξαιρέσεις.
Μια επιπλέον λειτουργία που περιλαμβάνουμε στο Bootstrap είναι η λειτουργία αντίθεσης χρωμάτων, color-contrast
. Χρησιμοποιεί τον αλγόριθμο WCAG 2.0 για τον υπολογισμό των ορίων αντίθεσης με βάση τη σχετική φωτεινότητα σε έναν sRGB
χρωματικό χώρο για να επιστρέψει αυτόματα ένα ανοιχτό ( #fff
), σκούρο ( #212529
) ή μαύρο ( #000
) χρώμα αντίθεσης με βάση το καθορισμένο βασικό χρώμα. Αυτή η λειτουργία είναι ιδιαίτερα χρήσιμη για μίξεις ή βρόχους όπου δημιουργείτε πολλές κλάσεις.
Για παράδειγμα, για τη δημιουργία χρωματικών δειγμάτων από τον $theme-colors
χάρτη μας:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Μπορεί επίσης να χρησιμοποιηθεί για εφάπαξ ανάγκες αντίθεσης:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Μπορείτε επίσης να καθορίσετε ένα βασικό χρώμα με τις λειτουργίες χρωματικού χάρτη μας:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Escape SVG
Χρησιμοποιούμε τη escape-svg
συνάρτηση για να ξεφύγουμε από τους <
χαρακτήρες >
και #
για τις εικόνες φόντου SVG. Κατά τη χρήση της 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);
}
Μείγματα
Ο κατάλογός μας scss/mixins/
έχει ένα σωρό mixins που τροφοδοτούν μέρη του Bootstrap και μπορούν επίσης να χρησιμοποιηθούν στο δικό σας έργο.
Σχέδια χρωμάτων
Μια σύντομη μίξη για το prefers-color-scheme
ερώτημα πολυμέσων είναι διαθέσιμη με υποστήριξη για light
, dark
και προσαρμοσμένους συνδυασμούς χρωμάτων.
@mixin color-scheme($name) {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
.custom-element {
@include color-scheme(dark) {
// Insert dark mode styles here
}
@include color-scheme(custom-named-scheme) {
// Insert custom color scheme styles here
}
}