Sass
Brûk ús boarne Sass-bestannen om te profitearjen fan fariabelen, kaarten, mixins en funksjes om jo te helpen rapper te bouwen en jo projekt oan te passen.
Brûk ús boarne Sass-bestannen om te profitearjen fan fariabelen, kaarten, mixins, en mear.
Triemstruktuer
Foarkom it wizigjen fan Bootstrap's kearnbestannen wannear mooglik. Foar Sass betsjut dat it meitsjen fan jo eigen stylblêd dat Bootstrap ymportearret sadat jo it kinne wizigje en útwreidzje. Oannommen dat jo in pakketbehearder lykas npm brûke, sille jo in bestânstruktuer hawwe dy't der sa útsjocht:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
As jo ús boarnebestannen hawwe ynladen en gjin pakketbehearder brûke, wolle jo wat ferlykber mei dy struktuer manuell ynstelle, en de boarnebestannen fan Bootstrap apart fan jo eigen hâlde.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Ymportearje
Yn jo custom.scss
sille jo Bootstrap's boarne Sass-bestannen ymportearje. Jo hawwe twa opsjes: befetsje alle Bootstrap, of kies de dielen dy't jo nedich binne. Wy stimulearje dat lêste, hoewol bewust wêze dat d'r wat easken en ôfhinklikens binne oer ús komponinten. Jo sille ek wat JavaScript moatte opnimme foar ús plugins.
// 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
Mei dy opset yn plak, kinne jo begjinne te wizigjen ien fan de Sass fariabelen en kaarten yn jo custom.scss
. Jo kinne ek begjinne te foegjen dielen fan Bootstrap ûnder de // Optional
seksje as nedich. Wy stelle foar om de folsleine ymportstapel út ús bootstrap.scss
bestân te brûken as jo útgongspunt.
Fariabele standerts
Elke Sass-fariabele yn Bootstrap omfettet de !default
flagge wêrtroch jo de standertwearde fan 'e fariabele yn jo eigen Sass kinne oerskriuwe sûnder de boarnekoade fan Bootstrap te feroarjen. Kopiearje en plakke fariabelen as nedich, wizigje har wearden en ferwiderje de !default
flagge. As in fariabele al is tawiisd, dan sil it net opnij wurde tawiisd troch de standertwearden yn Bootstrap.
Jo sille de folsleine list fan Bootstrap's fariabelen fine yn scss/_variables.scss
. Guon fariabelen binne ynsteld op null
, dizze fariabelen jouwe it pân net út, útsein as se yn jo konfiguraasje oerskreaun wurde.
Fariabele oerienkomsten moatte komme neidat ús funksjes ymporteare binne, mar foar de rest fan 'e ymporten.
Hjir is in foarbyld dat de background-color
en feroaret by color
it <body>
ymportearjen en kompilearjen fan Bootstrap fia 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";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Werhelje as nedich foar elke fariabele yn Bootstrap, ynklusyf de globale opsjes hjirûnder.
Kaarten en loops
Bootstrap omfettet in hânfol Sass-kaarten, kaaiweardepearen dy't it makliker meitsje om famyljes fan relatearre CSS te generearjen. Wy brûke Sass kaarten foar ús kleuren, raster breakpoints, en mear. Krekt as Sass fariabelen, alle Sass kaarten befetsje de !default
flagge en kin wurde oerskreaun en útwreide.
Guon fan ús Sass-kaarten binne standert gearfoege yn lege. Dit wurdt dien om te tastean maklik útwreiding fan in opjûne Sass map, mar komt op 'e kosten fan in make fuortsmite items út in kaart wat dreger.
Map feroarje
Alle fariabelen yn de $theme-colors
kaart wurde definiearre as standalone fariabelen. Om in besteande kleur yn ús $theme-colors
kaart te feroarjen, foegje it folgjende ta oan jo oanpaste Sass-bestân:
$primary: #0074d9;
$danger: #ff4136;
Letter wurde dizze fariabelen ynsteld yn Bootstrap's $theme-colors
kaart:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Taheakje oan kaart
Foegje nije kleuren ta oan $theme-colors
, of elke oare kaart, troch in nije Sass-kaart te meitsjen mei jo oanpaste wearden en it te fusearjen mei de orizjinele kaart. Yn dit gefal meitsje wy in nije $custom-colors
kaart en fusearje it mei $theme-colors
.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Fuortsmite fan kaart
Om kleuren te ferwiderjen fan $theme-colors
, of in oare kaart, brûk map-remove
. Wês bewust dat jo it moatte ynfoegje tusken ús easken en opsjes:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Required kaaien
Bootstrap giet oan fan de oanwêzigens fan guon spesifike kaaien binnen Sass-kaarten lykas wy dizze sels brûkten en útwreidzje. As jo de opnommen kaarten oanpasse, kinne jo flaters tsjinkomme wêr't de kaai fan in spesifike Sass-kaart wurdt brûkt.
Wy brûke bygelyks de primary
, success
, en danger
toetsen fan $theme-colors
foar keppelings, knoppen en formulierstaten. It ferfangen fan de wearden fan dizze kaaien soe gjin problemen presintearje, mar it fuortheljen fan se kin Sass-kompilaasjeproblemen feroarsaakje. Yn dizze gefallen moatte jo de Sass-koade oanpasse dy't gebrûk makket fan dy wearden.
Funksjes
Kleuren
Njonken de Sass-kaarten dy't wy hawwe, kinne temakleuren ek brûkt wurde as standalone fariabelen, lykas $primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Jo kinne kleuren ljochterje of tsjusterder meitsje mei Bootstrap's tint-color()
en shade-color()
funksjes. Dizze funksjes sille kleuren mingje mei swart of wyt, yn tsjinstelling ta Sass 'native lighten()
en darken()
funksjes dy't de ljochtheid sille feroarje mei in fêst bedrach, wat faaks net liedt ta it winske effekt.
// 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));
}
Yn 'e praktyk soene jo de funksje neame en de kleur- en gewichtparameters trochjaan.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Kleur kontrast
Om te foldwaan oan WCAG 2.0 tagonklikensnoarmen foar kleurkontrast , moatte auteurs in kontrastferhâlding fan op syn minst 4.5:1 leverje , mei heul pear útsûnderings.
In ekstra funksje dy't wy opnimme yn Bootstrap is de kleurkontrastfunksje color-contrast
,. It brûkt it WCAG 2.0-algoritme foar it berekkenjen fan kontrastdrompels basearre op relative luminânsje yn in sRGB
kleurromte om automatysk in ljochte ( #fff
), donkere ( #212529
) of swarte ( #000
) kontrastkleur werom te jaan op basis fan de oantsjutte basiskleur. Dizze funksje is benammen nuttich foar mixins as loops wêr't jo meardere klassen generearje.
Bygelyks om kleurstalen te generearjen fan ús $theme-colors
kaart:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
It kin ek brûkt wurde foar ienmalige kontrastbehoeften:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Jo kinne ek in basiskleur opjaan mei ús kleurkaartfunksjes:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Escape SVG
Wy brûke de escape-svg
funksje om te ûntkommen oan de <
, >
en #
karakters foar SVG eftergrûnôfbyldings. By it brûken fan de escape-svg
funksje moatte gegevens URI's wurde oanhelle.
Funksjes tafoegje en subtractearje
Wy brûke de funksjes add
en subtract
om de CSS- calc
funksje te wikkeljen. It primêre doel fan dizze funksjes is om flaters te foarkommen as in "ienheidleaze" 0
wearde wurdt trochjûn yn in calc
útdrukking. Ekspresjes lykas calc(10px - 0)
sille in flater weromjaan yn alle browsers, nettsjinsteande wiskundich korrekt.
Foarbyld wêr't de berekkening jildich is:
$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);
}
Foarbyld wêr't de berekkening ûnjildich is:
$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
Us scss/mixins/
map hat in ton mixins dy't dielen fan Bootstrap oanmeitsje en kinne ek brûkt wurde yn jo eigen projekt.
Kleurskema's
In shorthandmixin foar de mediaquery prefers-color-scheme
is beskikber mei stipe foar light
, dark
, en oanpaste kleurskema's.
@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
}
}