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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts 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";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. 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/maps";
@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 μέσω npm με το αρχικό μας έργο! Μεταβείτε στο αποθετήριο προτύπων twbs/bootstrap-npm-starter για να δείτε πώς να δημιουργήσετε και να προσαρμόσετε το Bootstrap στο δικό σας έργο npm. Περιλαμβάνει μεταγλωττιστή Sass, Αυτόματο πρόθεμα, Stylelint, PurgeCSS και Εικονίδια 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. Λάβετε υπόψη ότι πρέπει να εισάγετε $theme-colorsμεταξύ των απαιτήσεών μας αμέσως μετά τον ορισμό του variablesκαι πριν από τη χρήση του σε maps:

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

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

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 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) , οι συγγραφείς πρέπει να παρέχουν ελάχιστη αντίθεση χρώματος κειμένου 4,5:1 και ελάχιστη αντίθεση χρωμάτων εκτός κειμένου 3:1 , με πολύ λίγες εξαιρέσεις.

Για να βοηθήσουμε σε αυτό, συμπεριλάβαμε τη color-contrastλειτουργία στο Bootstrap. Χρησιμοποιεί τον αλγόριθμο αναλογίας αντίθεσης WCAG για τον υπολογισμό των ορίων αντίθεσης με βάση τη σχετική φωτεινότητα σε έναν 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
  }
}