Treci la conținutul principal Treceți la navigarea documentelor

Utilizați fișierele noastre sursă Sass pentru a profita de variabile, hărți, mixuri și funcții pentru a vă ajuta să construiți mai rapid și să vă personalizați proiectul.

Utilizați fișierele noastre sursă Sass pentru a profita de variabile, hărți, mixuri și multe altele.

Structura fișierului

Ori de câte ori este posibil, evitați modificarea fișierelor de bază ale Bootstrap. Pentru Sass, asta înseamnă să creați propria foaie de stil care să importe Bootstrap, astfel încât să o puteți modifica și extinde. Presupunând că utilizați un manager de pachete precum npm, veți avea o structură de fișiere care arată astfel:

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

Dacă ați descărcat fișierele noastre sursă și nu utilizați un manager de pachete, veți dori să configurați manual ceva similar cu acea structură, păstrând fișierele sursă ale Bootstrap separate de ale dvs.

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

Import

În custom.scss, veți importa fișierele sursă Sass ale Bootstrap. Aveți două opțiuni: includeți tot Bootstrap sau alegeți piesele de care aveți nevoie. Îl încurajăm pe acesta din urmă, deși rețineți că există anumite cerințe și dependențe între componentele noastre. De asemenea, va trebui să includeți ceva JavaScript pentru pluginurile noastre.

// 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/root";
@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";

// 5. Add additional custom code here

Cu această configurație, puteți începe să modificați oricare dintre variabilele și hărțile Sass din custom.scss. De asemenea, puteți începe să adăugați părți din Bootstrap în // Optionalsecțiune, după cum este necesar. Vă sugerăm să utilizați stiva completă de import din bootstrap.scssfișierul nostru ca punct de plecare.

Valori implicite variabile

Fiecare variabilă Sass din Bootstrap include indicatorul !defaultcare vă permite să suprascrieți valoarea implicită a variabilei în propriul dvs. Sass fără a modifica codul sursă al Bootstrap. Copiați și inserați variabile după cum este necesar, modificați-le valorile și eliminați !defaultmarcajul. Dacă o variabilă a fost deja atribuită, atunci nu va fi reatribuită de valorile implicite din Bootstrap.

Veți găsi lista completă a variabilelor Bootstrap în scss/_variables.scss. Unele variabile sunt setate la null, aceste variabile nu scot proprietatea decât dacă sunt suprascrise în configurația dvs.

Modificarea variabilelor trebuie să apară după ce funcțiile noastre sunt importate, dar înainte de restul importurilor.

Iată un exemplu care modifică background-colorși colorpentru <body>când se importă și se compila Bootstrap prin 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";

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

Repetați după cum este necesar pentru orice variabilă din Bootstrap, inclusiv opțiunile globale de mai jos.

Începeți cu Bootstrap prin npm cu proiectul nostru de pornire! Mergeți la depozitul de șabloane twbs/bootstrap-npm-starter pentru a vedea cum să construiți și să personalizați Bootstrap în propriul proiect npm. Include compilator Sass, Autoprefixer, Stylelint, PurgeCSS și pictograme Bootstrap.

Hărți și bucle

Bootstrap include o mână de hărți Sass, perechi valori cheie care facilitează generarea de familii de CSS înrudite. Folosim hărți Sass pentru culorile noastre, punctele de întrerupere ale grilei și multe altele. La fel ca variabilele Sass, toate hărțile Sass includ !defaultsteag și pot fi suprascrise și extinse.

Unele dintre hărțile noastre Sass sunt îmbinate în unele goale în mod implicit. Acest lucru se face pentru a permite extinderea ușoară a unei anumite hărți Sass, dar vine cu prețul de a face eliminarea elementelor de pe o hartă puțin mai dificilă.

Modificați harta

Toate variabilele din $theme-colorshartă sunt definite ca variabile independente. Pentru a modifica o culoare existentă în $theme-colorsharta noastră, adăugați următoarele la fișierul personalizat Sass:

$primary: #0074d9;
$danger: #ff4136;

Mai târziu, aceste variabile sunt setate în $theme-colorsharta Bootstrap:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Adăugați pe hartă

Adăugați noi culori la $theme-colors, sau la orice altă hartă, creând o nouă hartă Sass cu valorile dvs. personalizate și îmbinând-o cu harta originală. În acest caz, vom crea o nouă $custom-colorshartă și o vom îmbina cu $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Eliminați de pe hartă

Pentru a elimina culorile din $theme-colors, sau din orice altă hartă, utilizați map-remove. Rețineți că trebuie să îl introduceți între cerințele și opțiunile noastre:

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

Cheile necesare

Bootstrap presupune prezența unor chei specifice în hărțile Sass pe măsură ce le folosim și le extindem noi înșine. Pe măsură ce personalizați hărțile incluse, este posibil să întâmpinați erori atunci când este utilizată o anumită cheie a hărții Sass.

De exemplu, folosim tastele primary, success, și de la pentru link-uri, butoane și stări de formular. Înlocuirea valorilor acestor chei nu ar trebui să prezinte probleme, dar eliminarea lor poate cauza probleme de compilare Sass. În aceste cazuri, va trebui să modificați codul Sass care folosește acele valori.danger$theme-colors

Funcții

Culori

Pe lângă hărțile Sass pe care le avem, culorile temei pot fi folosite și ca variabile independente, cum ar fi $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Puteți deschide sau închide culorile cu ajutorul tint-color()și shade-color()funcțiile Bootstrap. Aceste funcții vor amesteca culorile cu alb sau negru, spre deosebire de nativul lui Sass lighten()și de darken()funcțiile care vor modifica luminozitatea cu o cantitate fixă, ceea ce adesea nu duce la efectul dorit.

// 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));
}

În practică, ați apela funcția și ați trece parametrii de culoare și greutate.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Contrastul culorilor

Pentru a îndeplini standardele de accesibilitate WCAG 2.0 pentru contrastul culorilor , autorii trebuie să furnizeze un raport de contrast de cel puțin 4,5:1 , cu foarte puține excepții.

O funcție suplimentară pe care o includem în Bootstrap este funcția de contrast de culoare, color-contrast. Utilizează algoritmul WCAG 2.0 pentru calcularea pragurilor de contrast bazate pe luminanța relativă într-un sRGBspațiu de culoare pentru a returna automat o culoare de contrast deschisă ( #fff), întunecată ( #212529) sau negru ( #000) pe baza culorii de bază specificate. Această funcție este utilă în special pentru mixuri sau bucle în care generați mai multe clase.

De exemplu, pentru a genera mostre de culoare de pe $theme-colorsharta noastră:

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

Poate fi folosit și pentru nevoi unice de contrast:

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

De asemenea, puteți specifica o culoare de bază cu funcțiile noastre de hartă a culorilor:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Evadare SVG

Folosim escape-svgfuncția pentru a evada caracterele <, >și #pentru imaginile de fundal SVG. Când utilizați escape-svgfuncția, URI-urile de date trebuie citate.

Funcții de adunare și scădere

Folosim funcțiile addși subtractpentru a încheia calcfuncția CSS. Scopul principal al acestor funcții este de a evita erorile atunci când o 0valoare „fără unitate” este transmisă într-o calcexpresie. Expresii precum calc(10px - 0)vor returna o eroare în toate browserele, în ciuda faptului că sunt corecte din punct de vedere matematic.

Exemplu în care calculul este valid:

$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);
}

Exemplu în care calculul nu este valid:

$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);
}

Mixine

Directorul nostru scss/mixins/are o mulțime de mix-uri care alimentează părți din Bootstrap și pot fi, de asemenea, utilizate în cadrul propriului proiect.

Scheme de culori

O combinație scurtă pentru prefers-color-schemeinterogarea media este disponibilă cu suport pentru light, dark, și scheme de culori personalizate.

@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
  }
}