Sass

Koristite naše izvorne Sass datoteke da biste iskoristili prednosti varijabli, mapa, miksa i funkcija koje će vam pomoći da napravite bržu i prilagodite svoj projekt.

Na ovoj stranici

Iskoristite naše izvorne Sass datoteke da iskoristite prednosti varijabli, mapa, miksa i još mnogo toga.

Struktura fajla

Kad god je moguće, izbjegavajte modificiranje osnovnih datoteka Bootstrapa. Za Sass, to znači kreiranje vlastite tablice stilova koja uvozi Bootstrap tako da ga možete modificirati i proširiti. Pod pretpostavkom da koristite upravitelj paketa kao što je npm, imat ćete strukturu datoteke koja izgleda ovako:

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

Ako ste preuzeli naše izvorne datoteke i ne koristite upravitelj paketa, poželjet ćete ručno kreirati nešto slično toj strukturi, držeći izvorne datoteke Bootstrapa odvojene od vaših.

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

Uvoz

U vaš custom.scss, uvest ćete izvorne Sass datoteke Bootstrapa. Imate dvije opcije: uključite cijeli Bootstrap ili odaberite dijelove koji su vam potrebni. Podstičemo ovo drugo, iako imajte na umu da postoje neki zahtjevi i ovisnosti među našim komponentama. Također ćete morati uključiti neki JavaScript za naše dodatke.

// 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

S tim podešavanjem možete početi mijenjati bilo koju od Sass varijabli i mapa u vašem custom.scss. Također možete početi da dodajete dijelove Bootstrapa ispod // Optionalodjeljka po potrebi. Predlažemo da koristite kompletan stog uvoza iz naše bootstrap.scssdatoteke kao početnu tačku.

Varijabilne zadane postavke

Svaka Sass varijabla u Bootstrapu uključuje !defaultoznaku koja vam omogućava da nadjačate zadanu vrijednost varijable u svom vlastitom Sass-u bez modifikacije izvornog koda Bootstrapa. Kopirajte i zalijepite varijable po potrebi, izmijenite njihove vrijednosti i uklonite !defaultoznaku. Ako je varijabla već dodijeljena, neće biti ponovo dodijeljena prema zadanim vrijednostima u Bootstrapu.

Naći ćete kompletnu listu varijabli Bootstrapa u scss/_variables.scss. Neke varijable su postavljene na null, te varijable ne daju svojstvo osim ako nisu nadjačane u vašoj konfiguraciji.

Zaobilaženja varijabli moraju doći nakon uvoza naših funkcija, ali prije ostatka uvoza.

Evo primjera koji mijenja background-colori colorza <body>pri uvozu i kompajliranju Bootstrapa putem npm-a:

// 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

Ponovite po potrebi za bilo koju varijablu u Bootstrapu, uključujući globalne opcije ispod.

Započnite s Bootstrapom putem npm-a s našim početnim projektom! Idite na twbs/bootstrap-npm-starter spremište šablona da vidite kako izgraditi i prilagoditi Bootstrap u svom vlastitom npm projektu. Uključuje Sass kompajler, Autoprefixer, Stylelint, PurgeCSS i Bootstrap ikone.

Mape i petlje

Bootstrap uključuje pregršt Sass mapa, parova ključnih vrijednosti koji olakšavaju generiranje porodica povezanih CSS-a. Koristimo Sass mape za naše boje, tačke prekida mreže i još mnogo toga. Baš kao i Sass varijable, sve Sass mape uključuju !defaultzastavu i mogu se nadjačati i proširiti.

Neke od naših Sass mapa su standardno spojene u prazne. Ovo je učinjeno kako bi se omogućilo jednostavno proširenje date Sass mape, ali dolazi po cijenu da uklanjanje stavki sa mape bude malo teže.

Izmijenite mapu

Sve varijable u $theme-colorsmapi su definirane kao samostalne varijable. Da biste izmijenili postojeću boju na našoj $theme-colorsmapi, dodajte sljedeće u svoju prilagođenu Sass datoteku:

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

Kasnije se ove varijable postavljaju u Bootstrap $theme-colorsmapu:

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

Dodaj na mapu

Dodajte nove boje na $theme-colors, ili bilo koju drugu kartu, kreiranjem nove Sass karte s vašim prilagođenim vrijednostima i spajanjem s originalnom mapom. U ovom slučaju, kreirat ćemo novu $custom-colorskartu i spojiti je sa $theme-colors.

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

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

Ukloni sa mape

Za uklanjanje boja sa $theme-colors, ili bilo koje druge karte, koristite map-remove. Imajte na umu da morate umetnuti $theme-colorsizmeđu naših zahtjeva neposredno nakon njegove definicije u variablesi prije njegove upotrebe u 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

Potrebni ključevi

Bootstrap pretpostavlja prisustvo nekih specifičnih ključeva unutar Sass mapa jer smo ih sami koristili i proširivali. Dok prilagođavate uključene mape, možete naići na greške kada se koristi određeni ključ Sass karte.

Na primjer, koristimo primary, success, i dangertipke from $theme-colorsza veze, dugmad i stanja obrasca. Zamjena vrijednosti ovih ključeva ne bi trebala predstavljati probleme, ali njihovo uklanjanje može uzrokovati probleme sa Sass kompilacijom. U ovim slučajevima, morat ćete izmijeniti Sass kod koji koristi te vrijednosti.

Funkcije

Boje

Pored Sass mapa koje imamo, boje teme se mogu koristiti i kao samostalne varijable, poput $primary.

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

Možete posvijetliti ili potamniti boje pomoću Bootstrapa tint-color()i shade-color()funkcija. Ove funkcije će mešati boje sa crnom ili belom, za razliku od Sass-ovog izvornog lighten()i darken()funkcije koje će promeniti osvetljenost za fiksnu količinu, što često ne dovodi do željenog efekta.

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

U praksi biste pozvali funkciju i prenijeli parametre boje i težine.

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

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

Kontrast boja

Da bi ispunili zahtjeve za kontrast u smjernicama za pristupačnost web sadržaja (WCAG) , autori moraju obezbijediti minimalni kontrast boja teksta od 4,5:1 i minimalni kontrast boja netekstualnog sadržaja od 3:1 , uz vrlo malo izuzetaka.

Da bismo pomogli u tome, uključili smo color-contrastfunkciju u Bootstrap. Koristi WCAG algoritam omjera kontrasta za izračunavanje pragova kontrasta na osnovu relativnog osvjetljenja u sRGBprostoru boja kako bi automatski vratio svijetlu ( #fff), tamnu ( #212529) ili crnu ( #000) kontrastnu boju na osnovu specificirane osnovne boje. Ova funkcija je posebno korisna za miksine ili petlje gdje generišete više klasa.

Na primjer, za generiranje uzoraka boja s naše $theme-colorskarte:

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

Može se koristiti i za jednokratne potrebe za kontrastom:

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

Također možete odrediti osnovnu boju pomoću naših funkcija mape boja:

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

Escape SVG

Koristimo escape-svgfunkciju za izbjegavanje znakova <, >i #za SVG pozadinske slike. Kada koristite escape-svgfunkciju, URI podataka mora biti naveden.

Funkcije sabiranja i oduzimanja

Koristimo addi subtractfunkcije da omotamo CSS calcfunkciju. Primarna svrha ovih funkcija je izbjegavanje grešaka kada se 0vrijednost „bez jedinica“ prenese u calcizraz. Izrazi poput calc(10px - 0)će vratiti grešku u svim pretraživačima, uprkos tome što su matematički ispravni.

Primjer gdje je izračun valjan:

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

Primjer gdje je izračun nevažeći:

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

Mixins

Naš scss/mixins/direktorij ima gomilu miksina koji napajaju dijelove Bootstrapa i mogu se koristiti iu vašem projektu.

Šeme boja

Dostupan je skraćeni mixin za prefers-color-schememedijski upit s podrškom za light, dark, i prilagođene sheme boja.

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