Sass

Uporabite naše izvorne datoteke Sass, da izkoristite spremenljivke, zemljevide, miksine in funkcije, ki vam bodo pomagali pri hitrejši gradnji in prilagajanju vašega projekta.

Na tej strani

Uporabite naše izvorne datoteke Sass, da izkoristite spremenljivke, zemljevide, mešanice in drugo.

Struktura datoteke

Kadarkoli je mogoče, se izogibajte spreminjanju jedrnih datotek Bootstrapa. Za Sass to pomeni ustvarjanje lastne tabele slogov, ki uvozi Bootstrap, da jo lahko spreminjate in razširite. Ob predpostavki, da uporabljate upravitelja paketov, kot je npm, boste imeli strukturo datoteke, ki je videti takole:

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

Če ste prenesli naše izvorne datoteke in ne uporabljate upravitelja paketov, boste želeli ročno ustvariti nekaj podobnega tej strukturi, tako da bodo izvorne datoteke Bootstrapa ločene od vaših.

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

Uvažanje

V svoj custom.scss, boste uvozili izvorne datoteke Sass Bootstrapa. Imate dve možnosti: vključite ves Bootstrap ali izberite dele, ki jih potrebujete. Spodbujamo slednje, čeprav se zavedajte, da obstajajo nekatere zahteve in odvisnosti med našimi komponentami. Za naše vtičnike boste morali vključiti tudi nekaj JavaScripta.

// 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 to nastavitvijo lahko začnete spreminjati katero koli od spremenljivk in zemljevidov Sass v svojem custom.scss. Po potrebi lahko začnete tudi dodajati dele Bootstrapa pod // Optionalrazdelek. Predlagamo, da bootstrap.scsskot izhodišče uporabite celoten uvozni sklad iz naše datoteke.

Privzete vrednosti spremenljivk

Vsaka spremenljivka Sass v Bootstrapu vključuje !defaultzastavico, ki vam omogoča, da preglasite privzeto vrednost spremenljivke v svojem Sassu, ne da bi spremenili izvorno kodo Bootstrapa. Po potrebi kopirajte in prilepite spremenljivke, spremenite njihove vrednosti in odstranite !defaultzastavico. Če je bila spremenljivka že dodeljena, potem ne bo ponovno dodeljena s privzetimi vrednostmi v Bootstrapu.

Celoten seznam spremenljivk Bootstrapa boste našli v scss/_variables.scss. Nekatere spremenljivke so nastavljene na null, te spremenljivke ne izpišejo lastnosti, razen če so preglasene v vaši konfiguraciji.

Preglasitve spremenljivk morajo priti po uvozu naših funkcij, vendar pred ostalimi uvozi.

Tukaj je primer, ki spremeni background-colorin colorza <body>pri uvažanju in prevajanju Bootstrapa prek 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

Po potrebi ponovite za katero koli spremenljivko v programu Bootstrap, vključno s spodnjimi globalnimi možnostmi.

Začnite uporabljati Bootstrap prek npm z našim začetnim projektom! Pojdite v repozitorij predlog twbs/bootstrap-npm-starter in si oglejte, kako zgraditi in prilagoditi Bootstrap v svojem projektu npm. Vključuje prevajalnik Sass, Autoprefixer, Stylelint, PurgeCSS in ikone Bootstrap.

Zemljevidi in zanke

Bootstrap vključuje peščico zemljevidov Sass, parov ključnih vrednosti, ki olajšajo ustvarjanje družin povezanih CSS. Zemljevide Sass uporabljamo za naše barve, prelomne točke mreže in drugo. Tako kot spremenljivke Sass tudi vse karte Sass vključujejo !defaultzastavico in jih je mogoče preglasiti in razširiti.

Nekateri naši zemljevidi Sass so privzeto združeni v prazne. To je storjeno, da se omogoči enostavno širjenje danega zemljevida Sass, vendar gre za ceno, da je odstranjevanje elementov z zemljevida nekoliko težje.

Spremeni zemljevid

Vse spremenljivke na $theme-colorszemljevidu so definirane kot samostojne spremenljivke. Če želite spremeniti obstoječo barvo na našem $theme-colorszemljevidu, svoji datoteki Sass po meri dodajte naslednje:

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

Kasneje so te spremenljivke nastavljene v Bootstrapovem $theme-colorszemljevidu:

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

Dodaj na zemljevid

Dodajte nove barve $theme-colorszemljevidu ali kateremu koli drugemu zemljevidu tako, da ustvarite nov zemljevid Sass z vrednostmi po meri in ga združite z izvirnim zemljevidom. V tem primeru bomo ustvarili nov $custom-colorszemljevid in ga združili z $theme-colors.

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

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

Odstrani z zemljevida

Če želite odstraniti barve iz $theme-colorsali katerega koli drugega zemljevida, uporabite map-remove. Zavedajte se, da morate $theme-colorsmed naše zahteve vstaviti takoj za njeno definicijo v variablesin pred njeno uporabo v 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

Zahtevani ključi

Bootstrap predpostavlja prisotnost nekaterih specifičnih ključev v zemljevidih Sass, kot smo jih uporabljali, in jih sami razširimo. Ko prilagajate vključene zemljevide, lahko naletite na napake, kjer se uporablja določen ključ zemljevida Sass.

Na primer, uporabljamo tipke primary, successin za povezave, gumbe in stanja obrazca. Zamenjava vrednosti teh ključev ne bi smela povzročati težav, vendar lahko njihova odstranitev povzroči težave pri prevajanju Sass. V teh primerih boste morali spremeniti kodo Sass, ki uporablja te vrednosti.danger$theme-colors

Funkcije

Barve

Poleg zemljevidov Sass, ki jih imamo, se lahko barve tem uporabljajo tudi kot samostojne spremenljivke, kot je $primary.

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

Barve lahko posvetlite ali potemnite z funkcijami tint-color()in shade-color()funkcijami Bootstrap. Te funkcije bodo mešale barve s črno ali belo, za razliko od Sassovih izvornih lighten()in darken()funkcij, ki bodo spremenile svetlost za fiksno količino, kar pogosto ne vodi do želenega 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));
}

V praksi bi poklicali funkcijo in ji posredovali parametre barve in teže.

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

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

Barvni kontrast

Da bi izpolnili kontrastne zahteve smernic za dostopnost spletne vsebine (WCAG) , morajo avtorji zagotoviti minimalni barvni kontrast besedila 4,5:1 in minimalni barvni kontrast nebesedila 3:1 , z zelo redkimi izjemami.

V pomoč pri tem smo color-contrastfunkcijo vključili v Bootstrap. Uporablja algoritem kontrastnega razmerja WCAG za izračun pragov kontrasta na podlagi relativne svetilnosti v sRGBbarvnem prostoru za samodejno vrnitev svetle ( #fff), temne ( #212529) ali črne ( #000) kontrastne barve na podlagi določene osnovne barve. Ta funkcija je še posebej uporabna za miksine ali zanke, kjer ustvarjate več razredov.

Na primer, za ustvarjanje barvnih vzorcev iz našega $theme-colorszemljevida:

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

Uporablja se lahko tudi za enkratne kontrastne potrebe:

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

Določite lahko tudi osnovno barvo z našimi funkcijami barvne karte:

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

Escape SVG

escape-svgFunkcijo uporabljamo za ubežanje <znakov >in #za slike ozadja SVG. Pri uporabi escape-svgfunkcije morajo biti podatkovni URI-ji navedeni v narekovajih.

Funkciji seštevanja in odštevanja

Funkciji addin uporabljamo subtractza zavijanje funkcije CSS calc. Primarni namen teh funkcij je preprečiti napake, ko 0se v izraz posreduje vrednost »brez enote« calc. Izrazi, kot calc(10px - 0)je, vrnejo napako v vseh brskalnikih, čeprav so matematično pravilni.

Primer, ko je izračun veljaven:

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

Primer, ko je izračun neveljaven:

$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 vsebuje ogromno miksinov, ki poganjajo dele Bootstrapa in jih je mogoče uporabiti tudi v vašem projektu.

Barvne sheme

Skrajšan mixin za prefers-color-schememedijsko poizvedbo je na voljo s podporo za light, darkin barvne sheme po meri.

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