Sass
Notaðu Sass frumskrána okkar til að nýta þér breytur, kort, blöndun og aðgerðir til að hjálpa þér að byggja hraðar og sérsníða verkefnið þitt.
Notaðu uppruna Sass skrárnar okkar til að nýta þér breytur, kort, mixins og fleira.
Uppbygging skráa
Þegar mögulegt er, forðastu að breyta kjarnaskrám Bootstrap. Fyrir Sass þýðir það að búa til þitt eigið stílblað sem flytur inn Bootstrap svo þú getir breytt og framlengt það. Miðað við að þú sért að nota pakkastjóra eins og npm, muntu hafa skráarskipulag sem lítur svona út:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Ef þú hefur hlaðið niður frumskránum okkar og ert ekki að nota pakkastjórnun, þá viltu handvirkt setja upp eitthvað svipað þeirri uppbyggingu og halda upprunaskrám Bootstrap aðskildum frá þínum eigin.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Flytur inn
Í custom.scss, muntu flytja inn Sass frumskrár Bootstrap. Þú hefur tvo valkosti: láttu allt Bootstrap fylgja með eða veldu þá hluta sem þú þarft. Við hvetjum hið síðarnefnda, þó að vera meðvitaður um að það eru nokkrar kröfur og ósjálfstæði milli íhluta okkar. Þú þarft líka að láta JavaScript fylgja með viðbæturnar okkar.
// 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
Með þeirri uppsetningu á sínum stað geturðu byrjað að breyta hvaða Sass breytum og kortum sem er í custom.scss. Þú getur líka byrjað að bæta við hluta af Bootstrap undir // Optionalhlutanum eftir þörfum. Við mælum með því að nota allan innflutningsstafla úr skránni okkar bootstrap.scsssem upphafspunkt.
Breytileg vanskil
Sérhver Sass breyta í Bootstrap inniheldur !defaultfánann sem gerir þér kleift að hnekkja sjálfgefnu gildi breytunnar í þínum eigin Sass án þess að breyta frumkóða Bootstrap. Afritaðu og límdu breytur eftir þörfum, breyttu gildum þeirra og fjarlægðu !defaultfánann. Ef breytu hefur þegar verið úthlutað, þá verður henni ekki endurúthlutað með sjálfgefnum gildum í Bootstrap.
Þú finnur heildarlistann yfir breytur Bootstrap í scss/_variables.scss. Sumar breytur eru stilltar á null, þessar breytur gefa ekki út eignina nema þeim sé hnekkt í stillingunum þínum.
Hnekkingar breytu verða að koma eftir að aðgerðir okkar eru fluttar inn, en fyrir restina af innflutningnum.
Hér er dæmi sem breytir background-colorog colorfyrir <body>þegar flutt er inn og sett saman Bootstrap í gegnum 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
Endurtaktu eftir þörfum fyrir hvaða breytu sem er í Bootstrap, þar á meðal alþjóðlegu valkostina hér að neðan.
Kort og lykkjur
Bootstrap inniheldur handfylli af Sass kortum, lykilgildapör sem gera það auðveldara að búa til fjölskyldur af tengdum CSS. Við notum Sass kort fyrir litina okkar, rist brotpunkta og fleira. Rétt eins og Sass breytur, innihalda öll Sass kort !defaultfánann og hægt er að hnekkja þeim og framlengja.
Sum Sass korta okkar eru sjálfgefið sameinuð í tóm. Þetta er gert til að auðvelda útvíkkun á tilteknu Sass korti, en það kostar að gera það aðeins erfiðara að fjarlægja hluti af kortinu.
Breyta korti
Allar breytur á $theme-colorskortinu eru skilgreindar sem sjálfstæðar breytur. Til að breyta núverandi lit á $theme-colorskortinu okkar skaltu bæta eftirfarandi við sérsniðna Sass skrána þína:
$primary: #0074d9;
$danger: #ff4136;
Síðar eru þessar breytur stilltar á $theme-colorskortinu Bootstrap:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Bæta við kort
Bættu nýjum litum við $theme-colors, eða hvaða annað kort sem er, með því að búa til nýtt Sass kort með sérsniðnum gildum þínum og sameina það upprunalega kortinu. Í þessu tilviki munum við búa til nýtt $custom-colorskort og sameina það $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Fjarlægja af kortinu
Til að fjarlægja liti af $theme-colors, eða einhverju öðru korti, notaðu map-remove. Athugaðu að þú verður að setja það inn á milli krafna okkar og valkosta:
// 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
Nauðsynlegir lyklar
Bootstrap gerir ráð fyrir að einhverjir sérstakir lyklar séu til staðar í Sass kortum eins og við notuðum og framlengdu þá sjálf. Þegar þú sérsníður kortin sem fylgja með, gætirðu rekist á villur þar sem verið er að nota tiltekinn Sass kortalykil.
Til dæmis notum við primary, success, og dangerlyklana frá $theme-colorsfyrir tengla, hnappa og eyðublöð. Það ætti ekki að valda neinum vandamálum að skipta út gildum þessara lykla, en að fjarlægja þá gæti valdið Sass safnvandamálum. Í þessum tilvikum þarftu að breyta Sass kóðanum sem notar þessi gildi.
Aðgerðir
Litir
Við hliðina á Sass kortunum sem við höfum, er einnig hægt að nota þemaliti sem sjálfstæðar breytur, eins og $primary.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Þú getur létta eða dökkna liti með Bootstrap's tint-color()og shade-color()aðgerðum. Þessar aðgerðir munu blanda litum saman við svart eða hvítt, ólíkt innfæddum Sass lighten()og darken()aðgerðum sem munu breyta léttleikanum um ákveðið magn, sem oft leiðir ekki til tilætluðra áhrifa.
// 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));
}
Í reynd myndirðu kalla aðgerðina og senda inn lita- og þyngdarbreytur.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Litaskil
Til þess að uppfylla WCAG 2.0 aðgengisstaðla fyrir litaskil verða höfundar að gefa upp birtuskil sem er að minnsta kosti 4,5:1 , með örfáum undantekningum.
Viðbótaraðgerð sem við erum með í Bootstrap er litaskilaaðgerðin, color-contrast. Það notar WCAG 2.0 reikniritið til að reikna út birtuskil byggt á hlutfallslegri birtu í sRGBlitarými til að skila sjálfkrafa ljósum ( #fff), dökkum ( #212529) eða svörtum ( #000) birtuskilalit byggt á tilgreindum grunnlit. Þessi aðgerð er sérstaklega gagnleg fyrir mixins eða lykkjur þar sem þú ert að búa til marga flokka.
Til dæmis, til að búa til litasýni úr $theme-colorskortinu okkar:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Það er einnig hægt að nota fyrir stakar birtuskilþarfir:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
Þú getur líka tilgreint grunnlit með litakortaaðgerðum okkar:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Flýja SVG
Við notum escape-svgaðgerðina til að flýja <, >og #stafi fyrir SVG bakgrunnsmyndir. Þegar escape-svgaðgerðin er notuð þarf að gefa upp gagnavefslóð.
Bæta við og draga frá aðgerðir
Við notum addog subtractaðgerðirnar til að vefja CSS calcaðgerðina. Megintilgangur þessara aðgerða er að forðast villur þegar „einingalaust“ 0gildi er sent inn í calctjáningu. Tjáning eins og calc(10px - 0)mun skila villu í öllum vöfrum, þrátt fyrir að vera stærðfræðilega réttar.
Dæmi þar sem útreikningurinn er gildur:
$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);
}
Dæmi þar sem útreikningurinn er ógildur:
$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
Skráin okkar scss/mixins/hefur fullt af blöndunum sem knýja hluta Bootstrap og er einnig hægt að nota í þínu eigin verkefni.
Litasamsetning
Stutt blöndun fyrir prefers-color-schemefjölmiðlafyrirspurnina er fáanleg með stuðningi fyrir light, dark, og sérsniðnar litasamsetningar.
@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
}
}