Sass

Upotrijebite naše izvorne Sass datoteke kako biste iskoristili prednosti varijabli, mapa, mixina i funkcija koje će vam pomoći da brže gradite i prilagodite svoj projekt.

Na ovoj stranici

Upotrijebite naše izvorne Sass datoteke kako biste iskoristili prednosti varijabli, mapa, mixina i još mnogo toga.

Struktura datoteke

Kad god je moguće, izbjegavajte mijenjanje osnovnih datoteka Bootstrapa. Za Sass to znači stvaranje vlastite tablice stilova koja uvozi Bootstrap tako da je možete mijenjati i proširivati. 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, trebali biste ručno stvoriti nešto slično toj strukturi, držeći Bootstrapove izvorne datoteke odvojene od svojih.

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

Uvoz

U svoj custom.scss, uvest ćete Bootstrapove izvorne Sass datoteke. Imate dvije mogućnosti: uključite cijeli Bootstrap ili odaberite dijelove koji su vam potrebni. Potičemo potonje, iako imajte na umu da postoje neki zahtjevi i ovisnosti među našim komponentama. Također ćete morati uključiti malo JavaScripta 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 postavkama možete početi mijenjati bilo koju od Sass varijabli i mapa u vašem custom.scss. Također možete početi dodavati dijelove Bootstrapa u // Optionalodjeljak prema potrebi. Predlažemo da bootstrap.scsskao početnu točku koristite cijeli uvozni stog iz naše datoteke.

Zadane postavke varijable

Svaka Sass varijabla u Bootstrapu uključuje !defaultoznaku koja vam omogućuje nadjačavanje zadane vrijednosti varijable u vašem vlastitom Sassu bez mijenjanja izvornog koda Bootstrapa. Kopirajte i zalijepite varijable prema potrebi, promijenite njihove vrijednosti i uklonite !defaultoznaku. Ako je varijabla već dodijeljena, neće joj se ponovno dodijeliti zadane vrijednosti u Bootstrapu.

Potpuni popis Bootstrapovih varijabli pronaći ćete u scss/_variables.scss. Neke su varijable postavljene na null, te varijable ne prikazuju svojstvo osim ako nisu nadjačane u vašoj konfiguraciji.

Nadjačavanja varijabli moraju doći nakon uvoza naših funkcija, ali prije ostatka uvoza.

Evo primjera koji mijenja background-colori colorza <body>prilikom uvoza i kompajliranja 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

Po potrebi ponovite za bilo koju varijablu u Bootstrapu, uključujući globalne opcije u nastavku.

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

Karte i petlje

Bootstrap uključuje pregršt Sass mapa, parova ključnih vrijednosti koji olakšavaju generiranje obitelji povezanih CSS-ova. Koristimo Sass karte za naše boje, prijelomne točke 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 prema zadanim postavkama spojene u prazne. Ovo je učinjeno kako bi se omogućilo jednostavno proširenje dane Sass karte, ali dolazi po cijenu malo težeg uklanjanja stavki s karte.

Izmijeni kartu

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

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

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

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

Dodaj na kartu

Dodajte nove boje $theme-colors, ili bilo kojoj drugoj karti, stvaranjem nove Sass karte sa svojim prilagođenim vrijednostima i spajanjem s originalnom kartom. U ovom slučaju izradit ćemo novu $custom-colorskartu i spojiti je s $theme-colors.

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

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

Ukloni s karte

Za uklanjanje boja s $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 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 prisutnost nekih specifičnih ključeva unutar Sass mapa koje smo koristili i sami ih proširujemo. Dok prilagođavate uključene karte, možete naići na pogreške gdje se koristi određeni ključ karte Sass.

Na primjer, koristimo tipke , primary, successi za veze, gumbe i stanja obrazaca. Zamjena vrijednosti ovih ključeva ne bi trebala predstavljati probleme, ali njihovo uklanjanje može uzrokovati probleme s Sass kompilacijom. U tim slučajevima morat ćete izmijeniti Sass kod koji koristi te vrijednosti.danger$theme-colors

Funkcije

Boje

Pored Sass mapa koje imamo, boje tema također se mogu koristiti kao samostalne varijable, poput $primary.

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

Možete posvijetliti ili potamniti boje s Bootstrapom tint-color()i shade-color()funkcijama. Ove funkcije će miješati boje s crnom ili bijelom, za razliku od Sassovih izvornih lighten()i darken()funkcija koje će mijenjati svjetlinu za fiksni iznos, što često ne dovodi do željenog učinka.

// 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 proslijedili joj parametre boje i težine.

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

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

Kontrast boja

Kako bi zadovoljili zahtjeve za kontrastom Smjernica za pristupačnost web sadržaja (WCAG) , autori moraju osigurati minimalni kontrast boja teksta od 4,5:1 i minimalni kontrast boja neteksta od 3:1 , uz vrlo malo iznimaka.

Kako bismo pomogli u tome, uključili smo color-contrastfunkciju u Bootstrap. Koristi algoritam omjera kontrasta WCAG za izračunavanje pragova kontrasta na temelju relativnog osvjetljenja u sRGBprostoru boja kako bi automatski vratio svijetlu ( #fff), tamnu ( #212529) ili crnu ( #000) boju kontrasta na temelju navedene osnovne boje. Ova je funkcija posebno korisna za mixins ili petlje u kojima generirate 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);
  }
}

Također se može koristiti za jednokratne potrebe kontrasta:

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

Također možete odrediti osnovnu boju s našim funkcijama karte boja:

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

Escape SVG

Koristimo ovu escape-svgfunkciju za izbjegavanje znakova <, >i #za SVG pozadinske slike. Kada koristite escape-svgfunkciju, URI-ji podataka moraju biti stavljeni u navodnike.

Funkcije zbrajanja i oduzimanja

Koristimo funkcije addi subtractza omotavanje CSS calcfunkcije. Primarna svrha ovih funkcija je izbjegavanje pogrešaka kada se 0vrijednost "bez jedinice" prenese u calcizraz. Izrazi poput calc(10px - 0)će vratiti pogrešku u svim preglednicima, unatoč tome što su matematički točni.

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/imenik sadrži gomilu mixina koji pokreću dijelove Bootstrapa, a također se mogu koristiti u vašem vlastitom projektu.

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